跨域问题：让网站飞越藩篱，实现无忧交流

前端

2023-12-14 00:30:40

跨域问题：网页开发中的隐形障碍

想象一下你是一个网站的开发者，正在创建一种酷炫的新功能，它允许用户从其他网站拉取信息。但是，当你在测试你的功能时，突然发现一切都不如你想象的那么顺利。你收到了一条讨厌的错误消息，告诉你无法访问其他网站的资源。这就是跨域问题！

跨域问题的根源：同源策略

跨域问题的存在源于浏览器的同源策略。这是一个安全机制，旨在防止恶意网站窃取你的个人信息或执行可疑的操作。根据同源策略，只有来自相同源（即协议、主机名和端口号相同）的请求才能被浏览器接受和处理。

跨域请求的类型

跨域请求主要分为两类：

简单请求： 使用 GET、HEAD 或 POST 方法，且请求头中不包含自定义标头的请求。
复杂请求： 使用 PUT、DELETE 等方法，或请求头中包含自定义标头的请求。

跨域解决方案

对付跨域问题，我们有几招：

跨域资源共享（CORS）： 一种允许服务器指定哪些源可以访问其资源的机制，从而合法化跨域请求。
JSONP： 一种利用 <script> 标签加载远程 JSON 数据的技术，通过将 JSON 数据包装成函数调用来绕过跨域限制。
iframe： 一种将一个网页嵌入到另一个网页中的技术，可以加载来自不同源的资源。
WebSocket： 一种允许浏览器与服务器建立持续连接的双向通信协议，不受同源策略限制。
服务端代理： 一种将跨域请求代理到服务器端的解决方案，服务器端代理接受来自不同源的请求，并将请求转发到相应的服务器。

代码示例

// 使用 CORS
const request = new Request('https://example.com/api/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    'Access-Control-Request-Headers': 'authorization',
  },
});

fetch(request)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

// 使用 JSONP
const script = document.createElement('script');
script.src = 'https://example.com/api/data?callback=myCallback';
document.body.appendChild(script);

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