CORS跨源资源共享

最新推荐文章于 2022-10-19 11:01:59 发布

LoveExceptional

最新推荐文章于 2022-10-19 11:01:59 发布

阅读量183

点赞数

本文链接：https://blog.csdn.net/qq_43648299/article/details/105018909

版权

什么是同源？

如果一个请求地址里面的协议、域名和端口号都相同，就属于同源。

什么是同源策略？

为了保证浏览器的安全，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。这叫作同源策略，同源策略是浏览器安全的基石。

什么是跨域？

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源。

依据浏览器同源策略，非同源脚本不可操作其他源下面的对象，想要操作其他源下的对象就需要跨域。

综上所述，在同源策略的限制下，非同源的网站之间不能发送AJAX请求。如有需要，可通过降域或其他技术实现。

常见跨域场景：

URL                                      说明                    是否允许通信
http://www.domain.com/a.js
http://www.domain.com/b.js         同一域名，不同文件或路径           允许
http://www.domain.com/lab/c.js

http://www.domain.com:8000/a.js
http://www.domain.com/b.js         同一域名，不同端口                不允许
 
http://www.domain.com/a.js
https://www.domain.com/b.js        同一域名，不同协议                不允许
 
http://www.domain.com/a.js
http://192.168.4.12/b.js           域名和域名对应相同ip              不允许
 
http://www.domain.com/a.js
http://x.domain.com/b.js           主域相同，子域不同                不允许
http://domain.com/c.js
 
http://www.domain1.com/a.js
http://www.domain2.com/b.js        不同域名                         不允许

跨域资源共享(CORS)技术

为了解决浏览器跨域问题，W3C提出了跨源资源共享方案，即CORS（Cross-Origin Resource Sharing）。CORS可以在不破坏即有规则的情况下，通过后端服务器实现CORS接口，从而实现跨域通信。CORS将请求分为两类：简单请求和非简单请求，分别对跨域通信提供了支持。

1.简单请求

在CORS出现前，发送HTTP请求时在头信息中不能包含任何自定义字段，且HTTP信息不超过以下几个字段：

Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type（仅限于[application/x-www-form-urlencoded、multipart/form-data、text/plain]类型）

对于简单请求，CORS的策略是请求时在请求头中增加一个Origin字段(Origin字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。)，服务器收到请求后，根据该字段判断是否允许该请求访问。

一个简单请求的例子：

GET /test HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate, sdch, br
Origin: http://www.test.com
Host: www.test.com

如果允许，就在HTTP头信息中添加Access-Control-Allow-Origin字段，并返回正确的结果。如果不允许，就不在HTTP头信息中添加Access-Control-Allow-Origin字段。

返回示例：

Access-Control-Allow-Origin: http://www.test.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

除了上面提到的Access-Control-Allow-Origin(该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求)，还有几个字段用于描述CORS返回结果：

Access-Control-Allow-Credentials：该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。

CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器，Access-Control-Allow-Credentials就设置为true。另一方面，开发者必须在AJAX请求中打开withCredentials属性。

var xhr = new XMLHttpRequest(); 
xhr.withCredentials = true;

否则，即使服务器同意发送Cookie，浏览器也不会发送。或者，服务器要求设置Cookie，浏览器也不会处理。

需要注意的是，如果要发送Cookie，Access-Control-Allow-Origin就不能设为星号，必须指定明确的、与请求网页一致的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie。

Access-Control-Expose-Headers：该字段可选。CORS请求时只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。例如FooBar。

2.非简单请求

对于非简单请求的跨源请求，浏览器会在真实请求发出前增加一次OPTION请求，称为预检请求（preflight request）。预检请求将真实请求的信息，包括请求方法、自定义头字段、源信息添加到HTTP头信息字段中，询问服务器是否允许这样的操作。

例如一个GET请求:

OPTIONS /test HTTP/1.1
Origin: http://www.test.com
Access-Control-Request-Method: GET
Access-Control-Request-Headers: X-Custom-Header
Host: www.test.com

预检"请求用的请求方法是OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是Origin，表示请求来自哪个源。

与CORS相关的字段有：请求使用的HTTP方法Access-Control-Request-Method。请求中包含的自定义头字段Access-Control-Request-Headers。

服务器收到请求时，需要分别对Origin、Access-Control-Request-Method、Access-Control-Request-Headers进行验证，验证通过后，会在返回HTTP头信息中添加：

Access-Control-Allow-Origin: http://www.test.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: X-Custom-header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000

上面的HTTP回应中，关键的是Access-Control-Allow-Origin字段，表示http://www.test.com可以请求数据。该字段也可以设为星号，表示同意任意跨源请求。

其它CORS相关字段的含义分别是：

Access-Control-Allow-Methods：该字段必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。

Access-Control-Allow-Headers：如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。上例是X-Custom-Header。

Access-Control-Allow-Credentials：是否允许用户发送、处理cookie。该字段与简单请求时的含义相同。

Access-Control-Max-Age：预检请求的有效期，单位为秒。有效期内，不会重复发送预检请求。

当预检请求通过后，浏览器才会发送真实请求到服务器。这样就实现了跨域资源的请求访问。以后每次浏览器正常的CORS请求，就都跟简单请求一样，会有一个Origin头信息字段。服务器的回应，也都会有一个Access-Control-Allow-Origin头信息字段。

3.CORS实现

CORS的代码实现比较简单，主要是要理解CORS实现跨域的原理和方式。新建一个CORS配置类，实现WebMvcConfigurer接口，重写跨域请求处理的addCorsMappings方法。

@Configuration
public class CorsConfig implements WebMvcConfigurer {
     
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry
                .addMapping("/**") // 允许跨域访问的路径
                .allowedOrigins("*") // 允许跨域访问的源
                .allowedMethods("*") // 允许请求方法，例如POST,GET,PUT等
                .maxAge(168000) // 预检间隔时间
                .allowedHeaders("*") // 允许头部设置
                .allowCredentials(true); // 是否发送cookie
    }
}

这样，每当客户端发送请求的时候，都会在头部附上跨域信息，就可以支持跨域访问了。