从零手写实现 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 cookiesCookies 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 配置文件的适当位置,通常是在 serverlocation 块中。
  • 根据你的应用需求,可能需要调整 Access-Control-Allow-MethodsAccess-Control-Allow-Headers 的值。
  • 如果你的应用需要处理预检请求,确保正确配置 OPTIONS 请求的处理。
  • 重启 Nginx 服务以使配置更改生效。

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

小结

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

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

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

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

开源地址

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

https://github.com/houbb/nginx4j

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/853889.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

js实现一个数据结构——栈

栈的概念就不再赘述,无可厚非的先进后出,而JS又是高级语言,数组中的方法十分丰富,已经自带了push pop方法进行入栈出栈的操作。 1.基本实现 class Stack {constructor() {this.items [];}// 入栈push(item) {this.items.push(i…

List 列表

文章目录 一、什么是 List 列表1.1 创建 List 列表的方式1.2 列表的新增函数方法1.3 列表的删除函数方法1.4 修改列表数据的方法1.5 列表的查询函数方法1.6 列表的排序和反序1.7 列表的复制 一、什么是 List 列表 List 列表:该数据类型定义的变量可以理解为是一个数…

【Java】已解决java.lang.NoClassDefFoundError异常

文章目录 一、问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决java.lang.NoClassDefFoundError异常 一、问题背景 java.lang.NoClassDefFoundError 是 Java 运行时环境(JRE)在尝试加载某个类时,但没有找到…

leetcode 200 岛屿数量

思路 就是深搜&#xff0c;将可以走到的都标为0 ##代码 class Solution {static int[][] to {{1,0},{0,1},{-1,0},{0,-1}};public int numIslands(char[][] grid) {// 深搜int result 0;for (int i 0; i < grid.length; i) {for (int j 0; j < grid[0].length; j)…

Flask-REXTx 学习笔记——2.字段掩码(Fields masks)

简介 字段掩码是一种在序列化和反序列化过程中使用的机制&#xff0c;用于控制哪些字段应该被包含或排除。在不同的上下文中&#xff0c;字段掩码可能有不同的实现和应用方式&#xff0c;但基本概念是相似的。以下是对字段掩码的一般理解&#xff1a; 选择性序列化&#xff1…

基于51单片机贪吃蛇小游戏

基于51单片机贪吃蛇小游戏 &#xff08;仿真&#xff0b;程序&#xff09; 功能介绍 具体功能&#xff1a; 1.用74HC573驱动点阵显示游戏画面&#xff1b; 2.上电后贪吃蛇会自动寻食&#xff1b; 3.按下四个按键中的任何一个就手动寻食了&#xff1b; ​演示视频&#xf…

java实现两个不同对象的集合复制

场景&#xff1a; 我们开发中会遇到集合对象复制的场景&#xff0c;可以避免代码的重复编写 基于 com.alibaba.fastjson.JSON 实现对象集合的拷贝 对象定义&#xff1a;ObjectA属性&#xff1a;id&#xff0c;name&#xff0c;ageObjectB属性&#xff1a;id&#xff0c;name…

利用visibilitychange事件来处理页面可见性变

使用场景&#xff1a;可以利用visibilitychange事件来处理页面可见性变化&#xff0c;例如在页面不可见时暂停视频播放、更新页面数据等。 在Vue 3中&#xff0c;可以使用onBeforeMount和onUnmounted钩子函数来监听页面可见性变化&#xff0c;并执行相应的逻辑。 以下是在Vue …

库的制作 与 使用 (Linux下)

目录 动静态库的制作 前置知识 库的基本构造 问题 分析 要给什么文件 如何更好的让别人使用 库的生成 静态库的生成 makefile参考 动态库的生成 makefile参考&#xff08;包含动态库和静态库生成&#xff09; 库的使用 法一&#xff1a;放入系统路径 弊端 法二…

Java 面试题:Java 中的 int 和 Integer 有什么区别?

在Java编程语言中&#xff0c;int和Integer都是用于表示整数的数据类型&#xff0c;但它们在使用和功能上有着明显的区别。int是一种基本数据类型&#xff08;primitive type&#xff09;&#xff0c;而Integer则是一个对象类型&#xff08;wrapper class&#xff09;。理解这两…

算法与数据结构:列表、栈、队列、树、图的深入解析

在软件开发和计算机科学领域&#xff0c;算法和数据结构是两大基石。它们不仅影响着程序的性能&#xff0c;还决定了解决问题的效率。以下&#xff0c;我们将从技术难点、面试官关注点、回答吸引力以及代码举例四个方面&#xff0c;详细解释常见的算法和数据结构&#xff1a;列…

半导体芯片结构以及译码驱动

一.半导体芯片结构 可能并不是只有一个芯片&#xff0c;有多个芯片就需要片选线了。 二.半导体存储芯片的译码驱动 主要有两种方式&#xff1a;线选法和重合法 线选法&#xff1a;每一个存储单元都用一根字选择线选中&#xff0c;直接选中存储单元的各位。&#xff08;一维…

《人生海海》读后感

麦家是写谍战的高手&#xff0c;《暗算》《风声》等等作品被搬上荧屏后&#xff0c;掀起了一阵一阵的收视狂潮。麦家声名远扬我自然是知道的&#xff0c;然而我对谍战似乎总是提不起兴趣&#xff0c;因此从来没有拜读过他的作品。这几天无聊时在网上找找看看&#xff0c;发现了…

C++11完美转发(引用折叠、万能引用)

完美转发是指在函数模板中&#xff0c;完全依照模板的参数的类型&#xff0c;将参数传递给函数模板中调用的另外一个函数。 函数模板在向其他函数传递自身形参时&#xff0c;如果相应实参是左值&#xff0c;它就应该被转发为左值&#xff1b;如果相 应实参是右值&#xff0c;它…

大数据入门实践一:mac安装Hadoop,Hbase,FLume

一、安装Hadoop 安装hadoop参考此文&#xff0c;关键点是安装JDK和Hadoop的配置&#xff0c;为避免引用文章变收费&#xff0c;我把关键信息摘录如下&#xff1a; jdk安装和配置就不说了(我本机安装了1.8/15/17/21&#xff0c;以17为主&#xff09;&#xff0c;hadoop安装过程…

简单剖析tRPC-Go中使用的第三方协程池ants

tRPC-Go中的tRPC.Go()方法使用了ants协程池&#xff0c;做个简单剖析 panjf2000/ants协程池 在tRPC.Go方法&#xff08;异步启动goroutine&#xff09;中看到里面使用了ants协程池去实现&#xff08;具体位置&#xff1a;g.pool.Invoke(p)&#xff09; 前置知识: 我们想异步完…

技巧解析,如何向Kimi提问才能写出更好的论文?

学境思源&#xff0c;一键生成论文初稿&#xff1a; AcademicIdeas - 学境思源AI论文写作 今天为大家整理、分享的Kimi提问技巧&#xff0c;将对论文写作的各个阶段提供帮助&#xff0c;可以以此来辅助学术论文撰写。 在此之前&#xff0c;先为大家科普一个概念——信息熵&am…

Python学习笔记11:入门终结篇

前言 入门知识到这里基本结束了&#xff0c;这里主要讲一下input和range。这两个讲完&#xff0c;讲讲后面进阶学些啥。 range函数 之前将循环的时候讲过一点&#xff0c;这个函数是Python内置的函数&#xff0c;主要用来生成一系列数字&#xff0c;简单方便。 这里重新&…

跨服务器迁移 Redis 数据

跨服务器迁移 Redis 数据可以通过以下几种方法实现&#xff1a; 使用 redis-cli 工具进行数据导出和导入&#xff1a; 先从源 Redis 服务器导出数据。然后将数据导入到目标 Redis 服务器。 使用 rdb 文件&#xff1a; 将源 Redis 服务器的 dump.rdb 文件拷贝到目标服务器&…

非连续分配管理方式(重点)

目录 一. 基本分页存储管理1.1 什么是分页存储1.2 页表 二. 基本地址变换机构三. 具有快表的地址变换机构3.1 什么是快表3.2 引入快表后, 地址的变换过程3.3 局部性原理 四. 两级页表4.1 单级页表存在什么问题?如何解决?4.2 两级页表的原理、逻辑地址结构4.3 如何实现地址变换…