从零手写实现 nginx-19-HTTP CORS（Cross-Origin Resource Sharing，跨源资源共享）介绍+解决方案

设置Access-Control-Allow-Origin响应头：在服务器响应中添加Access-Control-Allow-Origin头，指定允许访问的源。例如，如果你想允许所有源访问你的资源，可以设置为*（不推荐，因为不安全）：
```
Access-Control-Allow-Origin: *
```
或者指定具体的源：
```
Access-Control-Allow-Origin: https://www.example.com
```
处理预检请求（Preflight Request）：对于某些类型的请求，浏览器会先发送一个预检请求（OPTIONS请求），询问服务器是否允许实际的请求。服务器需要正确响应这个OPTIONS请求，并在响应中包含必要的CORS头信息。
设置其他CORS相关的响应头：
- Access-Control-Allow-Methods：指定允许的HTTP方法，如GET, POST等。
- Access-Control-Allow-Headers：指定允许的自定义请求头。
- Access-Control-Allow-Credentials：如果需要携带凭证（如cookies），则需要设置为true。
- Access-Control-Max-Age：指定预检请求的缓存时间。

前端解决方法

使用代理服务器：

在开发过程中，可以通过设置一个代理服务器来绕过CORS限制。

例如，使用Webpack的devServer.proxy配置或Node.js的http-proxy-middleware。
使用CORS代理服务：对于一些简单的请求，可以使用公共的CORS代理服务，如https://cors-anywhere.herokuapp.com/。
同源策略：确保前端应用和后端服务部署在同一源（相同的协议、域名和端口）。

Chrome 浏览器解决方法

老马推荐直接修改启动参数：

修改启动参数

你可以使用 --disable-web-security 参数来启动 Chrome，这样可以禁用浏览器的同源策略和 CORS 安全特性，从而允许跨域请求。

例如，可以在命令行中使用以下参数来启动 Chrome：

chrome.exe --user-data-dir="D://Chrome dev session" --disable-web-security

此外，还可以通过设置 --args 参数来实现类似的效果，如搜索结果[^3^]所示：

--args --disable-web-security --user-data-dir=D:\HaoroomsChromeUserData

或者在 macOS 上使用以下命令：

open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/Eric/MyChromeDevUserData/

请注意，这些方法仅适用于开发环境，不推荐在生产环境中使用，因为这会降低浏览器的安全性。

此外，如果遇到跨域 cookies 问题，还可以通过访问 chrome://flags 并禁用 SameSite by default cookies 和 Cookies without SameSite must be secure 选项来解决[^3^]。

其他方式：

使用Chrome扩展：安装一些允许CORS的Chrome扩展，如Allow CORS: Access-Control-Allow-Origin。
开发者工具中的CORS禁用：

在Chrome的开发者工具中，可以临时禁用CORS限制。

但是，这种方法只适用于开发和测试，不应用于生产环境。
- 打开Chrome的开发者工具。
- 点击“Network”（网络）标签。
- 在右侧的“Request Blocking”（请求拦截）部分，勾选“Disable cache”（禁用缓存）和“Disable CORS”（禁用CORS）。

注意

安全考虑：在生产环境中，不建议使用通配符*来设置Access-Control-Allow-Origin，因为这可能会带来安全风险。
预检请求：对于需要发送额外头信息（如自定义头）或使用非简单方法（如PUT、DELETE等）的请求，服务器必须正确处理OPTIONS预检请求。
凭证支持：如果需要跨域请求时携带cookies或认证信息，确保服务器设置了Access-Control-Allow-Credentials: true，并且前端请求时需要使用withCredentials: true。

通过上述方法，可以解决开发过程中遇到的CORS限制问题。

nginx 是如何支持 CORS 设置的？

Nginx 是一个流行的 Web 服务器和反向代理服务器，它可以通过配置文件来支持 CORS 设置。

以下是如何在 Nginx 配置文件中设置 CORS 的一些示例。

基本 CORS 设置

如果你想允许所有来源的跨域请求，可以在 Nginx 配置文件中添加以下行：

location / {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Max-Age' 1728000;
}

允许特定来源的 CORS 设置

如果只想允许特定的域名进行跨域请求，可以将 * 替换为具体的域名：

location / {
    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, Authorization';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Max-Age' 1728000;
}

处理预检请求

对于需要预检的请求（如带有自定义头或使用非简单HTTP方法的请求），Nginx 需要正确响应 OPTIONS 请求：

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, Authorization';
    add_header 'DAV' 1;
    return 204;
}

应用到特定路径

你可以将 CORS 设置应用到特定的路径或位置块：

location /api/ {
    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, Authorization';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Max-Age' 1728000;
}

注意事项

确保 CORS 相关的 add_header 指令在 Nginx 配置文件的适当位置，通常是在 server 或 location 块中。
根据你的应用需求，可能需要调整 Access-Control-Allow-Methods 和 Access-Control-Allow-Headers 的值。
如果你的应用需要处理预检请求，确保正确配置 OPTIONS 请求的处理。
重启 Nginx 服务以使配置更改生效。

通过这些配置，Nginx 可以支持跨源资源共享，从而允许前端应用从不同的源安全地请求后端服务。

小结

本节我们实现了 cors，这个对于浏览器安全和日常开发帮助比较大。

我们给出了常见的解决方案，不过实际生产注意使用安全。

下一节，我们考虑实现一下 cors 的支持。

我是老马，期待与你的下次重逢。

开源地址

为了便于大家学习，已经将 nginx 开源

https://github.com/houbb/nginx4j

老马啸西风

关注

28
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
从零手写实现 nginx-19-HTTP CORS（Cross-Origin Resource Sharing，跨源资源共享）介绍+解决方案

大家好，我是老马。很高兴遇到你。我们为 java 开发者实现了 java 版本的 nginx如果你想知道 servlet 如何处理的，可以参考我的另一个项目：手写从零实现简易版 tomcatminicat。
复制链接

扫一扫