秒懂跨域，亲测有效的三种常见解决方案

前端

2023-03-21 21:58:11

跨域问题：当网站遭受限制时

什么是跨域？

跨域是指浏览器出于安全原因限制不同网站（域名、协议或端口不同）之间交互的情况。这主要是为了防止恶意网站攻击或访问其他网站的数据。

常见的跨域解决方案

解决跨域问题有几种方法，以下是最常见的三个：

1. CORS（跨域资源共享）

CORS 是一种 W3C 标准，允许不同源网站在满足特定条件的情况下共享资源。服务器端需要在响应头中添加额外的 HTTP 头，例如：

Access-Control-Allow-Origin: *

客户端可以发送以下代码来使用 CORS：

fetch('https://example.com/api/v1/users', {
  mode: 'cors',
  headers: {
    'Content-Type': 'application/json'
  }
}).then(response => {
  console.log(response);
});

2. JSONP（JSON with Padding）

JSONP 是一种利用 <script> 标签跨域加载资源的技巧。它将数据包装成 JSONP 格式，如下所示：

callback({"name": "John Doe", "age": 30});

客户端可以发送以下代码来使用 JSONP：

var script = document.createElement('script');
script.src = 'https://example.com/api/v1/users?callback=myCallback';
document.head.appendChild(script);

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

3. 代理

代理是一种通过中间服务器转发请求来绕过同源策略的技术。可以使用 Nginx、Apache 等设置代理。以下是在 Nginx 中设置代理的示例：

location /api {
  proxy_pass https://example.com/api;
}

客户端可以使用以下代码发送代理请求：

fetch('http://localhost:8080/api/v1/users', {
  mode: 'cors',
  headers: {
    'Content-Type': 'application/json'
  }
}).then(response => {
  console.log(response);
});

总结

跨域问题可以通过 CORS、JSONP 和代理等解决方案来解决。每种解决方案都有其优点和缺点，开发人员应根据其特定需求进行选择。

常见问题解答