CORS跨域

先说说什么是同源

同源：如果两个页面的协议，端口（如果有指定）和主机都相同，则两个页面具有相同的源

比如：

http://example.com/page/index.html
http://example.com:81/page/index.html 不同端口
https://example.com/page/index.html  不同协议
http://bana.com/page/index.html  不同域名

当一个资源从与该资源本身所在的服务器不同的域、协议、端口请求一个资源时，资源会发起一个跨域 HTTP 请求，由于安全考虑，浏览器限制从脚本内发起的跨源HTTP请求，XMLHttpRequest和Fetch API，只能从加载应用程序的同一个域请求HTTP资源，除非使用CORS头文件

CORS概述

可能对服务器数据产生副作用的 HTTP 请求方法（除GET以外的，如搭配MIME类型的POST），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求 服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（包括 Cookies 和 HTTP 认证相关数据）

简单请求

满足以下所有条件的才会被视为简单请求，基本上我们日常开发只会关注前面两点

使用GET、POST、HEAD其中一种方法
只使用了如下的安全首部字段，不得人为设置其他首部字段
- Accept
- Accept-Language
- Content-Language
Content-Type

仅限以下三种

text/plain
multipart/form-data
application/x-www-form-urlencoded
HTML头部header field字段：DPR、Download、Save-Data、Viewport-Width、WIdth

请求中的任意XMLHttpRequestUpload 对象均没有注册任何事件监听器；XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问
请求中没有使用 ReadableStream 对象

对于简单请求有关的头部

Request Headers

Origin ：表示跨域请求的原始域

Response Headers

Access-Control-Allow-Origin ：表示允许哪些原始域进行跨域访问，它的值要么是请求时 Origin字段的值，要么是一个 *,表示接受任意域名的请求
Access-Control-Allow-Credentials：表示是否允许客户端发送 Cookie，是一个布尔值。默认情况下，Cookie不包括在 CORS 请求之中，设为 true，即表示服务器明确许可，Cookie 可以包含在请求中，一起发给服务器
Access-Control-Expose-Headers: CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段，自定义的header字段是拿不到的，如果想拿到自定义的Header 字段，就必须在 Access-Control-Expose-Headers里面指定

预检请求

预检请求则是要先发送OPTIONS方法的请求到服务器，以获取服务器是否允许实际的请求，大概预检请求如下:

使用了PUT、DELETE、CONNECT、OPTIONS、TRACE、PATCH方法
人为设置了非规定内的其他首部字段，参考上面简单请求的安全字段集合，还要特别注意Content-Type的类型
XMLHttpRequestUpload 对象注册了任何事件监听器
请求中使用了ReadableStream对象

Access-Control-Allow-Methods: 逗号分隔的字符串，表明服务器支持的所有跨域请求的方法。注意是所有方法，不是单个浏览器请求时的那个方法，这是为了避免多次 “预检”请求

Access-Control-Allow-Headers：如果浏览器请求包括 Access-Control-Request-Headers字段，则 Access-Control-Allow-Headers是必须的，它表明服务器支持的所有头信息字段，不限于浏览器再预检中请求的字段

Access-Control-Max-Age: 该字段可选，用来指定本次预检请求的有效期，单位为秒

请求附带身份验证

如果发起请求时设置withCredentials 标志设置为 true，从而向服务器发送cookie，但是如果服务器端的响应中未携带Access-Control-Allow-Credentials: true，浏览器将不会把响应内容返回给请求的发送者

对于附带身份凭证的请求，服务器不得设置 Access-Control-Allow-Origin 的值为*， 必须是某个具体的域名

注意，简单 GET 请求不会被预检；如果对此类带有身份凭证请求的响应中不包含该字段，这个响应将被忽略掉，并且浏览器也不会将相应内容返回给网页

SpringBoot进行CROS

局部配置

// 使用@CrossOrigin注解放在Restful 方法上，允许源为origins的内容访问
@RequestMapping(value = "/products")
@CrossOrigin(origins = "http://localhost:8080")

public ResponseEntity<Object> getProduct() {
   return null;
}

全局配置

允许源为http://localhost:9000访问products

@Bean
public WebMvcConfigurer corsConfigurer() {
   return new WebMvcConfigurerAdapter() {
      @Override
      public void addCorsMappings(CorsRegistry registry) {
         registry
         .addMapping("/**")
         .addMethods("*")// 这个要添加
         .allowedOrigins("http://localhost:9000");
      }    
   };
}

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                //是否发送Cookie
                .allowCredentials(true)
                //放行哪些原始域
                .allowedOrigins("*")
                .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"})
                .allowedHeaders("*")
                .exposedHeaders("*");
    }
}

使用WebMvcConfigurer配置时，一定要调用allowedMethods方法，不然，DELETE，PUT方法就不具有CORS功能，浏览器跨域访问时就会出现403错误

CORS跨域

目录

CORS跨域

CORS概述

简单请求

预检请求

请求附带身份验证

SpringBoot进行CROS

局部配置

全局配置

Da Xin