ToB企服应用市场:ToB评测及商务社交产业平台

标题: 从零手写实现 nginx-19-HTTP CORS（Cross-Origin Resource Sharing，跨源资 [打印本页]

---

作者: 八卦阵    时间: 2024-6-12 17:06
标题: 从零手写实现 nginx-19-HTTP CORS（Cross-Origin Resource Sharing，跨源资
前言

大家好，我是老马。很高兴遇到你。
我们为 java 开辟者实现了 java 版本的 nginx

https://github.com/houbb/nginx4j

如果你想知道 servlet 如何处理的，可以参考我的另一个项目：

手写从零实现简易版 tomcat minicat

手写 nginx 系列

如果你对 nginx 原理感爱好，可以阅读：
从零手写实现 nginx-01-为什么不能有 java 版本的 nginx?
从零手写实现 nginx-02-nginx 的核心能力
从零手写实现 nginx-03-nginx 基于 Netty 实现
从零手写实现 nginx-04-基于 netty http 出入参优化处理
从零手写实现 nginx-05-MIME范例（Multipurpose Internet Mail Extensions，多用途互联网邮件扩展范例）
从零手写实现 nginx-06-文件夹主动索引
从零手写实现 nginx-07-大文件下载
从零手写实现 nginx-08-范围查询
从零手写实现 nginx-09-文件压缩
从零手写实现 nginx-10-sendfile 零拷贝
从零手写实现 nginx-11-file+range 合并
从零手写实现 nginx-12-keep-alive 连接复用
从零手写实现 nginx-13-nginx.conf 配置文件先容
从零手写实现 nginx-14-nginx.conf 和 hocon 格式有关系吗？
从零手写实现 nginx-15-nginx.conf 如何通过 java 剖析处理？
从零手写实现 nginx-16-nginx 支持配置多个 server
从零手写实现 nginx-17-nginx 默认配置优化
从零手写实现 nginx-18-nginx 请求头+响应头操纵
从零手写实现 nginx-19-nginx cors
从零手写实现 nginx-20-nginx 占位符 placeholder
从零手写实现 nginx-21-nginx modules 模块信息概览
从零手写实现 nginx-22-nginx modules 分模块加载优化
从零手写实现 nginx-23-nginx cookie 的操纵处理
从零手写实现 nginx-24-nginx IF 指令
HTTP CORS 是什么？

HTTP CORS（Cross-Origin Resource Sharing，跨源资源共享）是一种安全机制，它允许一个网页（运行在浏览器中的网页）去请求另一个不同源（域名、协议或端口不同）的资源。
想象一下，互联网上的每个网站都有自己的“家”，而且通常只能访问自己家里的东西。
但是，有时候一个网站必要访问另一个网站的数据或资源，比如图片、视频或API。如果没有CORS，这种访问是不被允许的，因为浏览器出于安全考虑会制止这种跨源请求。
CORS机制允许网站“告诉”浏览器，它信任哪些外部网站，并允许它们访问自己的资源。
这样，当一个网站请求另一个网站资源时，浏览器会查抄这个请求是否被允许。如果允许，浏览器就会允许这次请求，否则会制止。
简单来说，CORS就像是一个“通行证”，它让不同的网站之间可以安全地共享资源。
为什么必要 HTTP CORS？

HTTP CORS（跨源资源共享）之所以必要，重要是为了保护用户和网站数据的安全，同时也提供了一种机制来允许安全地跨网站访问资源。
为什么必要CORS：
想象一下，你有一个自己的图书馆（网站A），而你的朋友有一个不同的图书馆（网站B）。通常，你只能借阅你自己图书馆里的册本，不能直接去朋友图书馆借书。这是因为每个图书馆都有自己的规则和隐私政策，它们不盼望其他人随意访问自己的册本。
但是，有时候你必要借阅朋友图书馆里的一本书，这时候就必要一种机制来确保这个过程是安全的。CORS就相当于是一张“借书证”，它允许你的朋友图书馆知道你想要借书，而且决定是否允许你借阅。
如果没有CORS这样的机制，任何图书馆的人都可以随意去其他图书馆借书，这可能会导致一些问题：

• 隐私问题：图书馆的册本可能包含敏感信息，不应该被未经授权的人访问。
  
• 安全问题：如果有人恶意访问图书馆，可能会造成册本损坏或信息泄露。
  
• 管理问题：图书馆必要可以或许控制谁可以借阅册本，以及借阅的条件。
  

通过CORS，网站可以明确哪些外部网站是可信的，而且可以设置规则来控制它们如何访问资源。
这样，既保护了网站的资源不被滥用，又允许了安全的跨网站交互，比如交际媒体登录、API调用等。
简而言之，CORS是网络安全和资源共享之间的一个平衡点。
开辟过程中遇到了 CORS 限制，如何办理？

遇到CORS（跨源资源共享）限制时，通常有以下几种办理方法，分别针对后端、前端和浏览器：
后端办理方法

• 设置Access-Control-Allow-Origin响应头：
  在服务器响应中添加Access-Control-Allow-Origin头，指定允许访问的源。例如，如果你想允许所有源访问你的资源，可以设置为*（不保举，因为不安全）：
  1. Access-Control-Allow-Origin: *

  复制代码
  或者指定具体的源：
  1. 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：

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

复制代码

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

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

复制代码

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

1. 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 配置文件中添加以下行：

1. location / {
2.     add_header 'Access-Control-Allow-Origin' '*';
3.     add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
4.     add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
5.     add_header 'Access-Control-Allow-Credentials' 'true';
6.     add_header 'Access-Control-Max-Age' 1728000;
7. }

复制代码

允许特定来源的 CORS 设置

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

1. location / {
2.     add_header 'Access-Control-Allow-Origin' 'https://www.example.com';
3.     add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
4.     add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
5.     add_header 'Access-Control-Allow-Credentials' 'true';
6.     add_header 'Access-Control-Max-Age' 1728000;
7. }

复制代码

处理预检请求

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

1. if ($request_method = 'OPTIONS') {
2.     add_header 'Access-Control-Allow-Origin' 'https://www.example.com';
3.     add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
4.     add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
5.     add_header 'DAV' 1;
6.     return 204;
7. }

复制代码

应用到特定路径

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

1. location /api/ {
2.     add_header 'Access-Control-Allow-Origin' 'https://www.example.com';
3.     add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
4.     add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
5.     add_header 'Access-Control-Allow-Credentials' 'true';
6.     add_header 'Access-Control-Max-Age' 1728000;
7. }

复制代码

留意事项

• 确保 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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4