Http的CORS

曾经终败给现在 2022-02-21 00:08 137阅读 0赞

### 文章目录 ###

*  浏览器的同源策略
 *  CORS
 *   *  例子
     *  预检请求

# 浏览器的同源策略 #

**所谓同源策略**，就是指浏览器会限制从一个源加载的网页和脚本与其他源的资源交互。**这是一种用于隔离潜在恶意软件的机制**。

可能有人会奇怪，明明网页是自己写的，自己怎么会请求含有恶意程序的URL呢？**话虽如此，** 可是我们在开发中经常会引入第三方的库，当我们通过`script`标签将它们引入的时候是没有限制的。**而它们之中就可能含有对恶意URL的请求。**

所谓**同源**，就是指两个URL的**协议、主机、端口**要一致。这就能看出同源策略的思路–“信任自家人”。因为同源的两个URL一般都是来自同一个企业或者个人，自己人不会坑自己人。

例如对`http://store.company.com/dir/page.html`的同源检测：

![在这里插入图片描述][20190410092436289.png]

**注：上面说“限制”，既指浏览器限制脚本发起跨域请求，也指浏览器允许发起跨域请求，但是响应被浏览器拦截**

# CORS #

同源策略默认阻止跨域获取资源。但是CORS给了web服务器这样的权限，即服务器可以选择，允许跨域请求访问到它们的资源。

CORS，即**Corss-Orgin Resource Sharing，跨域资源共享**。这是一个由一系列HTTP首部字段组成的系统，这些首部字段决定了浏览器是否阻止脚本中代码发起的跨域请求。

## 例子 ##

假设当前页面的URL为`http://www.a.com`，现在我想对`http://www.b.com`发起请求。

那么请求头中会包含一个`Origin`字段，值即为`http://www.a.com`。

响应头中则会包含`Access-Control-Allow-Origin`字段，该字段表示服务器允许哪些源发起的访问。若该字段的值为`*`或`http://www.a.com`，则跨域访问成功，若都不是，则跨域请求被浏览器拦截。

## 预检请求 ##

对于一些“**也许会对服务器造成影响**”的请求（例如`PUT`、带有参数的`POST`、`DELETE`等），浏览器会首先使用`OPTIONS`发起一个预检请求，**以便提前获知服务器是否可以允许后续将要发出的正式请求。**

预检请求的首部中会包含两个字段`Access-Control-Request-Method`和`Access-Control-Request-Headers`。

例如，`Access-Control-Request-Method: POST`，`Access-Control-Request-Headers:Content-Type`  
就是**告知服务器我将使用POST方法发起请求，并且请求首部字段中会包含一个`Content-type`**。

而在服务器的响应中会包含`Access-Control-Allow-Methods`、`Access-Control-Allow-Headers`、`Access-Control-Max-Age`。

前两个字段分别表示**服务器允许请求的方法**和**服务器允许请求首部包含的字段**。

而第三个字段表示在字段值所指定的时间内不必再次预检。

[20190410092436289.png]: /images/20220221/db3216b0fe134dafb60bd134bbf88f44.png

发表评论取消回复

表情：

评论列表（有 0 条评论，137人围观）

还没有评论，来说两句吧...

相关阅读

相关 Elasticsearch配置文件中的 http:cors.x字段

elasticsearch配置文件中http.cors.x字段用途和用法 cors解释：Cross Origin Resource Sharing 跨域资源共享 htt

古城微笑少年丶/ 2023年10月05日 03:16/ 0 赞/ 12 阅读

相关 php全局cors,带有php头的CORS

正确地处理CORS请求有点复杂。下面是一个功能，它将更全面地(并且正确地)响应。/\\ \ An example CORS-compliant method. It wi

淩亂°似流年/ 2023年01月15日 05:55/ 0 赞/ 193 阅读

相关 CORS 完全手册之 CORS 详解

![b25d8c85a0294b65fbbbb2a7e0795172.gif][] 在 CORS 完全手册之如何解决CORS 问题？里面我们提到了常见的CORS 错误解

柔光的暖阳◎/ 2022年11月18日 02:10/ 0 赞/ 199 阅读

相关 CORS 完全手册之 CORS 详解

点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群在 CORS 完全手册之如何解决CORS 问题？里面我们提到了常见的CORS 错误解法，以

比眉伴天荒/ 2022年10月12日 05:26/ 0 赞/ 192 阅读

相关 HTTP之访问控制「CORS」

序言跨域资源共享「CORS」就是在不同的域名、协议、端口直接请求资源。本文主要讲述了什么是跨域，什么情况下会出现预检请求，我司的跨域安全访问什么是跨域同源

谁借莪１个温暖的怀抱￠/ 2022年10月01日 05:56/ 0 赞/ 74 阅读

相关 HTTP：CORS

CORS [CORS][] （Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览

左手的ㄟ右手/ 2022年09月04日 11:00/ 0 赞/ 124 阅读

相关 SpringBoot的CORS

引自[我的gitbook][gitbook]： CORS（跨域资源共享），这是由W3C提出的。浏览器有同源策略，源\[origin\]就是协议、域名和端口号,同时同源策

r囧r小猫/ 2022年05月20日 01:46/ 0 赞/ 155 阅读

相关 Http的CORS

文章目录浏览器的同源策略 CORS 例子预检请求浏览器的同源策略所谓同源策略，就是指浏览器会限制从一个源加载的网页和

曾经终败给现在/ 2022年02月21日 00:08/ 0 赞/ 138 阅读

相关跨域访问小结 HTTP-访问控制（CORS）

跨域资源共享([CORS][]) 是一种机制，它使用额外的 [HTTP][] 头来告诉浏览器让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源

雨点打透心脏的1/2处/ 2021年11月23日 11:08/ 0 赞/ 339 阅读

相关 CORS

CORS 跨域请求CORS 代码示例跨域请求CORS CORS 全称为 Cross Origin Resource Sharing（跨域资源共享），

以你之姓@/ 2021年10月06日 03:06/ 0 赞/ 355 阅读