二级域名跨域问题

基础概念

二级域名跨域问题是指在不同的二级域名之间进行数据交互时，由于浏览器的同源策略（Same-Origin Policy）限制，导致无法直接访问对方的数据。同源策略要求协议、域名和端口必须完全相同，否则视为跨域。

类型

常见的跨域解决方案包括：

CORS（跨域资源共享）：服务器端设置特定的HTTP头，允许特定的域名访问资源。
JSONP（JSON with Padding）：利用<script>标签不受同源策略限制的特性，通过动态创建<script>标签来实现跨域请求。
代理服务器：在同一域名下设置一个代理服务器，前端请求代理服务器，代理服务器再请求目标服务器，从而绕过同源策略。
WebSocket：WebSocket协议不受同源策略限制，可以实现跨域通信。

应用场景

跨域问题常见于以下场景：

前后端分离：前端和后端部署在不同的域名或子域名下。
微服务架构：多个微服务部署在不同的子域名下，需要相互调用。
CDN加速：使用CDN服务时，资源可能分布在不同的域名下。

问题及解决方法

问题：为什么会出现跨域问题？

原因：浏览器的同源策略限制了不同源之间的数据交互。

解决方法

CORS

服务器端设置Access-Control-Allow-Origin头，允许特定的域名访问资源。

// 服务器端示例（Node.js + Express）
const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://subdomain.example.com');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

app.get('/data', (req, res) => {
  res.json({ message: 'Hello from server!' });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

JSONP

前端通过动态创建<script>标签来实现跨域请求。

<!-- 前端示例 -->
<script>
function handleResponse(data) {
  console.log(data.message);
}

const script = document.createElement('script');
script.src = 'https://subdomain.example.com/data?callback=handleResponse';
document.body.appendChild(script);
</script>

代理服务器

在同一域名下设置一个代理服务器，前端请求代理服务器，代理服务器再请求目标服务器。

// 代理服务器示例（Node.js + Express）
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();

app.use('/api', createProxyMiddleware({
  target: 'https://subdomain.example.com',
  changeOrigin: true,
  pathRewrite: {
    '^/api': ''
  }
}));

app.listen(3000, () => {
  console.log('Proxy server is running on port 3000');
});

WebSocket

使用WebSocket协议实现跨域通信。

// 前端示例
const socket = new WebSocket('wss://subdomain.example.com/socket');

socket.onopen = () => {
  socket.send('Hello from client!');
};

socket.onmessage = (event) => {
  console.log(event.data);
};