CORS跨域资源共享与OPTIONS请求

前端碎碎念

已于 2024-04-18 14:26:58 修改

阅读量443

点赞数

CC 4.0 BY-SA版权

分类专栏：面试文章标签： CORS 跨域跨站资源共享

于 2019-03-31 18:37:48 首次发布

本文链接：https://blog.youkuaiyun.com/zhongqw_00/article/details/88933169

面试专栏收录该内容

113 篇文章

订阅专栏

本文介绍了CORS（跨域资源共享）的基本概念，区分了简单请求与非简单请求，并详细解释了预检请求的工作原理及其实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于同源策略的影响，所以作为程序员就必须解决跨域的问题，此文章说的是CORS（跨域资源共享）

1、简单请求

必须满足以下的条件

请求方法必须是HEAD GET POST之一

http的头信息
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type:

               application/x-www-form-urlcoded
               mutipart/form-data
               text/plain

不能同时满足上面的俩个条件，就属于非简单请求
简单请求是在发送ajax的时候，给Request Header中添加Orgin（协议+域名+端口）字段，它表示我们的请求源，CORS服务端会将该字段作为跨域标志。
在这里插入图片描述
CORS收到该请求后，首先会判断Orgin是否在允许源范围内，验证通过,服务端就会返回下面

反之如果没有通过验证，那么就会抛出“同源检测异常”

2、非简单请求

如果发出的是非简单请求的时候，就会进行预检请求，先发送OPTIONS来验证，如果验证通过之后，就会发生和简单请求一样的检测了。
options请求：是一种预检请求，用于在实际发送另一个请求（如POST、PUT、DELETE等）之前，确定服务器是否接受该请求。这种方法的主要作用在于CORS（跨源资源共享）场景中，用来检查跨域请求的可行性。

3、CORS

当你的网页尝试从一个域名发起一个跨域请求到另一个域名时，浏览器会首先使用OPTIONS方法发起一个HTTP预检请求到服务器上的资源，询问服务器是否允许这样的跨域请求。这个请求包括以下HTTP头信息：

Origin: 发起跨域请求的页面的域名。
Access-Control-Request-Method: 在实际请求中会使用的HTTP方法。
Access-Control-Request-Headers: 在实际请求中会额外使用的头信息字段。

服务器在响应OPTIONS请求时会返回一些HTTP头信息，这些信息告诉浏览器服务器是否允许预检请求中描述的跨域请求。这些头信息可能包括：

Access-Control-Allow-Origin: 指定哪些域名可以访问资源。
Access-Control-Allow-Methods: 指定允许的HTTP方法。
Access-Control-Allow-Headers: 在实际请求中可以携带的自定义HTTP头部字段。
Access-Control-Max-Age: 指定预检请求的结果能够被缓存多长时间。

在这里插入图片描述
该图中发起了content-type=application/json的非简单请求，就发起了俩次jsonp.do请求，第一次就是预检阶段
Origin: http://127.0.0.1:8020,
Access-Control-Request-Method:POST
Access-Control-Request-Headers:content-type
文章借鉴掘金
 知乎