JavaScript 中如何解决跨域问题？

推荐答案

在 JavaScript 中，解决跨域问题的常见方法包括：

1. CORS（跨域资源共享）：在服务器端设置响应头 Access-Control-Allow-Origin，允许特定的域名或所有域名访问资源。
2. JSONP（JSON with Padding）：通过动态创建 <script> 标签，利用 <script> 标签的跨域特性来获取数据。
3. 代理服务器：在服务器端设置一个代理服务器，客户端请求代理服务器，代理服务器再请求目标服务器，从而绕过浏览器的同源策略。
4. WebSocket：使用 WebSocket 协议进行跨域通信，WebSocket 不受同源策略的限制。
5. postMessage：使用 window.postMessage 方法在不同窗口或 iframe 之间进行跨域通信。

本题详细解读

1. CORS（跨域资源共享）

CORS 是一种标准的跨域解决方案，通过在服务器端设置响应头 Access-Control-Allow-Origin 来允许特定的域名或所有域名访问资源。例如：

// 服务器端设置
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*"); // 允许所有域名访问
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
  res.header("Access-Control-Allow-Headers", "Content-Type, Authorization");
  next();
});

2. JSONP（JSON with Padding）

JSONP 是一种利用 <script> 标签的跨域特性来获取数据的方法。客户端通过动态创建 <script> 标签，将回调函数名作为参数传递给服务器，服务器返回一段 JavaScript 代码，调用该回调函数并传递数据。

function handleResponse(data) {
  console.log(data);
}

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

3. 代理服务器

代理服务器是一种在服务器端设置的中转服务器，客户端请求代理服务器，代理服务器再请求目标服务器，从而绕过浏览器的同源策略。例如：

// www.javascriptcn.com code example
// 客户端请求代理服务器
fetch('/proxy?url=https://example.com/api')
  .then(response => response.json())
  .then(data => console.log(data));

// 服务器端代理请求
app.get('/proxy', (req, res) => {
  const url = req.query.url;
  request(url, (error, response, body) => {
    if (!error && response.statusCode === 200) {
      res.send(body);
    }
  });
});

4. WebSocket

WebSocket 是一种全双工通信协议，不受同源策略的限制。可以通过 WebSocket 进行跨域通信。

// www.javascriptcn.com code example
const socket = new WebSocket('wss://example.com');

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

socket.onmessage = (event) => {
  console.log('Message from server:', event.data);
};

5. postMessage

postMessage 是 HTML5 提供的一种跨文档通信机制，可以在不同窗口或 iframe 之间进行跨域通信。

// www.javascriptcn.com code example
// 发送消息
window.postMessage('Hello', 'https://example.com');

// 接收消息
window.addEventListener('message', (event) => {
  if (event.origin === 'https://example.com') {
    console.log('Received message:', event.data);
  }
});