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

2024-06-12 21:04
文章标签 实现 解决方案 介绍 nginx http origin resource 手写 19 cross sharing 资源共享 cors 跨源

本文主要是介绍从零手写实现 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这样的机制，任何图书馆的人都可以随意去其他图书馆借书，这可能会导致一些问题：

  1. 隐私问题：图书馆的书籍可能包含敏感信息，不应该被未经授权的人访问。

  2. 安全问题：如果有人恶意访问图书馆，可能会造成书籍损坏或信息泄露。

  3. 管理问题：图书馆需要能够控制谁可以借阅书籍，以及借阅的条件。

通过CORS，网站可以明确哪些外部网站是可信的，并且可以设置规则来控制它们如何访问资源。

这样，既保护了网站的资源不被滥用，又允许了安全的跨网站交互，比如社交媒体登录、API调用等。

简而言之，CORS是网络安全和资源共享之间的一个平衡点。

开发过程中遇到了 CORS 限制，如何解决？

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

后端解决方法

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

    Access-Control-Allow-Origin: *

    或者指定具体的源：

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

  2. 处理预检请求（Preflight Request）： 对于某些类型的请求，浏览器会先发送一个预检请求（OPTIONS请求），询问服务器是否允许实际的请求。服务器需要正确响应这个OPTIONS请求，并在响应中包含必要的CORS头信息。

  3. 设置其他CORS相关的响应头：

    • Access-Control-Allow-Methods：指定允许的HTTP方法，如GET, POST等。
    • Access-Control-Allow-Headers：指定允许的自定义请求头。
    • Access-Control-Allow-Credentials：如果需要携带凭证（如cookies），则需要设置为true。
    • Access-Control-Max-Age：指定预检请求的缓存时间。

前端解决方法

  1. 使用代理服务器：

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

    例如，使用Webpack的devServer.proxy配置或Node.js的http-proxy-middleware。

  2. 使用CORS代理服务： 对于一些简单的请求，可以使用公共的CORS代理服务，如https://cors-anywhere.herokuapp.com/。

  3. 同源策略： 确保前端应用和后端服务部署在同一源（相同的协议、域名和端口）。

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^]。

其他方式：

  1. 使用Chrome扩展： 安装一些允许CORS的Chrome扩展，如Allow CORS: Access-Control-Allow-Origin。

  2. 开发者工具中的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

这篇关于从零手写实现 nginx-19-HTTP CORS（Cross-Origin Resource Sharing，跨源资源共享）介绍+解决方案的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1055331。

相关文章

性能测试介绍

性能测试介绍

性能测试是一种测试方法，旨在评估系统、应用程序或组件在现实场景中的性能表现和可靠性。它通常用于衡量系统在不同负载条件下的响应时间、吞吐量、资源利用率、稳定性和可扩展性等关键指标。 为什么要进行性能测试 通过性能测试，可以确定系统是否能够满足预期的性能要求，找出性能瓶颈和潜在的问题，并进行优化和调整。 发现性能瓶颈：性能测试可以帮助发现系统的性能瓶颈，即系统在高负载或高并发情况下可能出现的问题
阅读更多...
水位雨量在线监测系统概述及应用介绍

水位雨量在线监测系统概述及应用介绍

在当今社会，随着科技的飞速发展，各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中，水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术，其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成，形成了一个完整的闭环系统。 数据采集单元：这是系统的“眼睛”，
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
【C++】_list常用方法解析及模拟实现

【C++】_list常用方法解析及模拟实现

相信自己的力量，只要对自己始终保持信心，尽自己最大努力去完成任何事，就算事情最终结果是失败了，努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一：什么是list？ •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二：list常用接口 •🌰1.默认成员函数 🔥构造函数（⭐） 🔥析构函数 •🌰2.list对象
阅读更多...
【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...
Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸： 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  （注意不能是bmp格式） 替换默认锁屏壁纸： 将图片资源放入vendo
阅读更多...
C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

哈喽，你好啊，我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记，这是第6篇； 接下来实现实时显示当前选中红球数量，蓝球数量； 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时，在对应的位置显示实时已选择的红球、蓝球的数量； 02 标签名称 分别设置Label标签名称为：lblRedCount、lblBlueCount
阅读更多...
图神经网络模型介绍（1）

图神经网络模型介绍（1）

我们将图神经网络分为基于谱域的模型和基于空域的模型，并按照发展顺序详解每个类别中的重要模型。 1.1基于谱域的图神经网络         谱域上的图卷积在图学习迈向深度学习的发展历程中起到了关键的作用。本节主要介绍三个具有代表性的谱域图神经网络：谱图卷积网络、切比雪夫网络和图卷积网络。 （1）谱图卷积网络 卷积定理：函数卷积的傅里叶变换是函数傅里叶变换的乘积，即F{f*g}
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2