CORS 工作原理和常用解决方法

2023-10-17 23:35:47 浏览数 (1)

CORS 产生的原因

CORS 全称为（Cross-Origin Resource Sharing：跨站资源共享），CORS 的产生和浏览器的同源策略（Same Origin Policy

SOP）有关系，所以我们先了解什么是同源策略

一、什么是同源策略（Same Origin Policy）

SOP是所有的现代浏览器都具备的安全措施，它不允许从一个加载的js脚本和资源的Origin域与另一个Origin域进行交互。换句话说，如果您的网站是www.example.com，则您无法向www.test.com发出XHR请求。

如果说SOP是限制跨源访问的一种方式，那么CORS是一种绕过SOP限制并允许您的前端向服务器提出合法请求的方法。

二、同源策略的源(Same Origin Policy的Origin)

源由三部分组成：协议，host ip（域）和端口

同源策略就是：不允许不同的ip、端口、协议的应用在浏览器内进行互相资源共享、请求调用。如下所示

二、CORS 是如何工作的

CORS有两种类型的请求：“simple”简单请求和“preflight”预检请求，根据请求方法的不同由浏览器确定使用哪种请求。

simple简单请求：

如果符合以下所有条件，则API请求被视为简单请求：

  • API方法是以下方法之一：GET，POST或HEAD。
  • Content-Type请求头包含：application/x-www-form-urlencoded，multipart/form-data，text/plain

如果您的API请求被视为simple简单请求，这个请求就可以直接被发送给服务器。

服务器使用 CORS HTTP Headers进行响应，浏览器将检查 Access-Control-Allow-Origin 后决定这个请求是否可以突破同源策略的限制，进行下一步的处理。

preflight预检请求：

如果您的API请求不满足成为简单请求的标准（最常见不满足简单请求标准的Content-Type值为application/json），则浏览器将在发送实际请求之前发出预检请求。

举一个例子，我们尝试使用GET请求https://example.com/status，Content-Type是application/json，所以浏览器认为它不符合一个简单请求的标准，因此浏览器会在发出实际请求之前发出预检请求，这个预检请求是使用HTTP的 OPTIONS方法发出的：

常用解决跨域方法

  1. 增加反向代理服务器，浏览器访问反向代理服务器，服务器进行接口透传
  2. 根据 CORS 要求，Header 中增加正确的标头

版权声明：本文为CSDN博主「字母哥哥」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/hanxiaotongtong/article/details/109282415

参考链接

彻底搞懂CORS（跨域资源共享）相关内容 什么是CORS 为什么需要CORS 如何解决CORS问题 简单请求 预检

http

0 人点赞