无论前后端分离or单体框架,跨域问题不会缺席

2024-02-07 11:45:34

浏览器实施同源策略，限制了来自不同源的脚本访问 DOM 资源。跨域是一种常见的场景，如访问不同域名、端口或协议的资源。有几种方法可以解决跨域问题，例如 CORS、JSONP 和代理。

CORS（跨域资源共享）

CORS 允许跨域请求，并提供了控制访问的安全机制。在服务器端，您可以设置允许跨域访问的源，以及允许的请求方法、标头和响应类型。在客户端，您需要在发送跨域请求时添加 CORS 标头。

以下是一个使用 CORS 解决跨域问题的示例：

// 服务器端
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

// 客户端
var request = new XMLHttpRequest();
request.open("GET", "https://example.com/api/v1/users");
request.setRequestHeader("Origin", "https://example.org");
request.send();

JSONP（JSON with Padding）

JSONP 是解决跨域问题的另一种方法。JSONP 使用 <script> 标签加载远程脚本，然后用指定的回调函数处理响应。JSONP 的优势在于不需要在服务器端进行任何配置，但其局限性在于只能用于 GET 请求。

以下是一个使用 JSONP 解决跨域问题的示例：

// 服务器端
$callback($_GET['callback'], $data);

// 客户端
var script = document.createElement("script");
script.src = "https://example.com/api/v1/users?callback=myCallback";
document.body.appendChild(script);

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

代理

代理服务器充当客户端和服务器之间的中介。客户端向代理服务器发送请求，然后代理服务器再向目标服务器发送请求。这样，客户端就可以跨域访问目标服务器的资源。

以下是一个使用代理服务器解决跨域问题的示例：

// 客户端
var proxyUrl = "https://proxy.example.org";
var request = new XMLHttpRequest();
request.open("GET", proxyUrl + "?url=https://example.com/api/v1/users");
request.send();