跨域资源共享（CORS）浅析：跨域请求的微妙世界

2023-07-22 01:34:26

跨域资源共享 (CORS)：破解跨域请求的秘密

简介

在现代网络开发中，跨域资源共享 (CORS) 扮演着至关重要的角色。它允许浏览器安全地跨越不同的域（网站地址）交换数据和资源，从而打破了同源策略的限制。本博客将深入探讨 CORS 的工作原理、解决方案，并回答一些常见问题。

同源策略和 CORS

同源策略是一项浏览器安全机制，它限制浏览器从一个域（协议 + 主机名 + 端口）向另一个不同域发起请求。然而，随着互联网变得越来越互联互通，跨域请求变得越来越普遍。例如，加载来自第三方网站的图片、调用来自不同 API 的数据，这些都会涉及跨域访问。

CORS 是一种解决跨域请求的机制。它通过允许浏览器在 HTTP 头中添加额外的字段，突破同源策略的限制。这些字段包含以下信息：

Origin： 请求的来源域
Access-Control-Allow-Origin： 服务器允许跨域请求的域
Access-Control-Allow-Methods： 服务器允许跨域请求的 HTTP 方法
Access-Control-Allow-Headers： 服务器允许跨域请求的 HTTP 头字段
Access-Control-Allow-Credentials： 服务器是否允许跨域请求携带凭证（如 Cookie、HTTP 身份验证等）

CORS 工作原理

当浏览器发起跨域请求时，它首先会发送一个预检请求（OPTIONS 请求）到服务器。这个请求的目的在于询问服务器是否允许跨域请求，以及允许哪些跨域请求。

服务器收到预检请求后，根据其策略设置上述 CORS 字段，并将其作为响应头返回给浏览器。浏览器检查响应头，如果允许跨域请求，则发送实际请求到服务器。如果不允许，则阻止请求发送。

跨域请求解决方案

1. CORS

CORS 是解决跨域请求的最佳解决方案。它是一个标准的、跨浏览器兼容的解决方案，允许服务器明确指定哪些跨域请求是被允许的。

2. JSONP

JSONP（JSON with Padding）是一种非标准的解决方案，利用 <script> 标签的跨域特性来绕过同源策略。它使用一个回调函数来接收 JSON 数据。

3. CORS Proxy

CORS Proxy 是一种代理服务器，可以将跨域请求转发到允许跨域访问的服务器。它充当中间人，处理跨域请求。

示例代码：

Node.js CORS 设置：

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*'); // 允许所有域
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.header('Access-Control-Allow-Credentials', true);
  next();
});