CORS帮你解救跨域！让AJAX请求不再“孤军奋战”

2023-11-12 10:19:13

拥抱跨域请求：CORS 的兴起

在 Web 开发的早期，跨域请求曾是一个令人头疼的问题。浏览器出于安全考虑，限制了 AJAX 请求跨越不同的域名、协议和端口。这种限制意味着，如果一个网页需要向另一个域名下的服务器发送 AJAX 请求，就会遇到跨域错误，请求会被浏览器阻止。

然而，随着技术的不断发展，CORS（跨域资源共享）应运而生。CORS 是一种浏览器机制，它允许浏览器向跨域服务器发送请求，同时又保证了安全性。

CORS 的工作原理：解除跨域限制

CORS 工作原理分为以下几个步骤：

预检请求： 浏览器首先向服务器发送一个 OPTIONS 请求，询问服务器是否允许该跨域请求。
服务器响应： 服务器收到 OPTIONS 请求后，根据 CORS 规定返回响应头，告知浏览器是否允许该请求。
浏览器验证： 浏览器检查响应头，如果服务器允许跨域请求，则发送正式请求。
正式请求： 服务器收到正式请求后，处理请求并返回响应。

在客户端使用 CORS：解锁跨域通信

在客户端使用 CORS 需要在 AJAX 请求中添加额外的请求头，以便告知浏览器要进行跨域请求。这些请求头包括：

Origin： 表示请求的来源域名。
Access-Control-Request-Method： 表示请求的方法（如 GET、POST、PUT、DELETE 等）。
Access-Control-Request-Headers： 表示请求中包含的自定义头。

// JavaScript 代码示例：
const request = new Request('https://example.com/api/data', {
  method: 'GET',
  headers: {
    'Origin': 'https://mywebsite.com',
    'Access-Control-Request-Method': 'GET',
    'Access-Control-Request-Headers': 'Content-Type'
  }
});

在服务端配置 CORS：允许跨域访问

在服务端，需要在响应头中添加额外的响应头，告知浏览器允许跨域请求。这些响应头包括：

Access-Control-Allow-Origin： 表示允许哪些域名进行跨域请求。
Access-Control-Allow-Methods： 表示允许哪些请求方法进行跨域请求。
Access-Control-Allow-Headers： 表示允许哪些自定义头进行跨域请求。

// PHP 代码示例：
header('Access-Control-Allow-Origin: https://mywebsite.com');
header('Access-Control-Allow-Methods: GET, POST');
header('Access-Control-Allow-Headers: Content-Type');