CORS

同源策略的核心概念

同源策略要求在三个方面相同，才能允许访问彼此的资源：

1.协议相同（如 http:// 和 https://）。

2.域名相同（如 example.com 和 sub.example.com 不同）。

如果这三者中有任何一项不同，浏览器将会阻止跨域请求，从而保护用户数据的安全。

具体例子：

假设我们有两个网站：

网站 A: https://www.example.com

网站 B: https://www.anotherexample.com

网站 A 中有一个网页，包含一个 JavaScript 文件，目的是从 B 网站中获取一些敏感数据，例如用户的个人信息。

fetch('https://www.anotherexample.com/api/userinfo')
    .then(response => response.json())
    .then(data => console.log(data));

当这个代码运行时，浏览器会检查：

• 网站 A 的协议是 https，网站 B 的协议也是 https，协议相同。

• 网站 A 的域名是 www.example.com，网站 B 的域名是 www.anotherexample.com，域名不同。

• 假设两个网站都在默认的 443 端口运行，端口相同。

由于域名不同，浏览器会阻止这次跨域请求，报错信息可能是“CORS 头丢失”或者“跨域请求被阻止”。

如何突破同源策略？

虽然同源策略严格限制跨域访问，但有时候需要允许跨域请求。浏览器中突破同源策略的一个常见方法是 跨域资源共享（CORS）。它允许服务器通过设置特定的响应头，告诉浏览器允许来自其他源的请求。

CORS 的例子：

如果网站 B 的服务器希望允许网站 A 访问它的资源，那么它可以在响应头中添加：(其实这是后端开发所做的工作)

Access-Control-Allow-Origin: https://www.example.com

这样，浏览器会允许网站 A 访问网站 B 的资源，突破了同源策略的限制。

要使网站 B 的服务器在响应头中添加 Access-Control-Allow-Origin，通常需要在服务器端进行配置。下面举个例子来说明:

Nginx 配置 CORS

在 Nginx 服务器中，可以通过添加以下配置来允许跨域访问。

步骤：

在 Nginx 的配置文件（通常是 /etc/nginx/nginx.conf 或者 /etc/nginx/sites-available/default）中，添加以下内容：

server {
    listen 80;
    server_name www.anotherexample.com;

    location /api/ {
        # 允许特定域名访问
        add_header 'Access-Control-Allow-Origin' 'https://www.example.com';

        # 允许的请求方法，比如 GET, POST
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

        # 允许的请求头
        add_header 'Access-Control-Allow-Headers' 'Content-Type';

        # 如果需要处理复杂的跨域请求
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' 'https://www.example.com';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Content-Type';
            return 204;  # 响应空的请求体
        }
    }
}

原文始发于微信公众号（迪哥讲事）：CORS