前端如何巧妙处理跨域

2024-01-03 14:46:12

跨域，在前端开发中是一个老生常谈的问题，也是一个绕不开的坎儿。它指的就是浏览器出于安全考虑，不允许来自一个源的脚本访问另一个源上的资源。在实际的开发中，跨域问题经常会遇到，比如：

A 网站想要请求 B 网站的 API
A 网站想要加载 B 网站的图片
A 网站想要在 B 网站上设置 cookie

那么，前端要如何处理跨域呢？

1. 了解同源策略

要解决跨域问题，首先要知道什么是同源策略。同源策略是一个安全策略，它限制了不同来源的脚本访问彼此的资源。所谓同源，是指协议、域名、端口三者相同。

例如，以下两个 URL 是同源的：

https://example.com/foo.html
https://example.com:443/bar.html

而以下两个 URL 不是同源的：

http://example.com/foo.html
https://example.com/foo.html
https://example.com:8080/foo.html

2. 使用 CORS

CORS（Cross-Origin Resource Sharing）是一种跨域资源共享机制，它允许不同源的脚本访问彼此的资源。CORS 通过在 HTTP 请求头中添加一些特殊的字段来实现，这些字段指定了哪些来源被允许访问资源。

要使用 CORS，需要在服务器端进行配置。具体来说，需要在响应头中添加以下字段：

Access-Control-Allow-Origin: *

其中，* 表示允许所有来源访问资源。也可以指定具体的来源，例如：

Access-Control-Allow-Origin: https://example.com

3. 使用 JSONP

JSONP（JSON with Padding）是一种解决跨域问题的简单方法。它利用了 <script> 标签可以跨域加载脚本的特性。

要使用 JSONP，需要在客户端生成一个唯一的回调函数名，然后将该函数名作为参数传递给服务器。服务器端接收到请求后，将数据包装成一个 JSONP 响应，并在响应中调用回调函数。

<script>
  function callback(data) {
    // 处理数据
  }

  var script = document.createElement('script');
  script.src = 'https://example.com/api/data?callback=callback';
  document.head.appendChild(script);
</script>

4. 使用 WebSocket

WebSocket 是一种双向通信协议，它允许客户端和服务器在建立连接后进行实时通信。WebSocket 不受同源策略的限制，因此可以用来解决跨域问题。

要使用 WebSocket，需要在客户端和服务器端都进行配置。具体来说，需要在客户端使用 WebSocket API 建立连接，并在服务器端使用 WebSocket 服务器进行监听。

// 客户端代码
var socket = new WebSocket('ws://example.com/api/chat');

socket.onopen = function() {
  // 连接成功
};

socket.onmessage = function(event) {
  // 收到消息
  console.log(event.data);
};

socket.onclose = function() {
  // 连接关闭
};

// 发送消息
socket.send('Hello world!');

// 服务器端代码
var WebSocketServer = require('websocket').server;

var server = new WebSocketServer({
  httpServer: httpServer
});

server.on('request', function(request) {
  var connection = request.accept(null, request.origin);

  connection.on('message', function(message) {
    // 收到消息
    console.log(message.utf8Data);

    // 发送消息
    connection.sendUTF('Hello world!');
  });

  connection.on('close', function() {
    // 连接关闭
  });
});