继续创作，加速成长！这是我参与「日新计划 10 月更文挑战」的第16天，点击检查活动概况

1.为什么有跨域问题？

跨域不一定都会有跨域问题。

因为跨域问题是浏览器对于Ajax恳求的一种安全约束：一个页面建议的Ajax恳求，只能是与当时页域名相同的途径，这能有用的阻挠跨站攻击。

因而：跨域问题 是针对 Ajax 的一种约束。

2.解决跨域问题的计划

现在比较常用的跨域解决计划有3种：

  • Jsonp

    最早的解决计划，使用script标签能够跨域的原理完结。

    约束：

    • 需求服务的支撑
    • 只能建议GET恳求

  • nginx反向署理

    思路是：使用nginx把跨域反向署理为不跨域，支撑各种恳求方法

    缺陷：需求在nginx进行额定装备，语义不清晰

  • CORS

    规范化的跨域恳求解决计划，安全可靠。

    优势：

    • 在服务端进行操控是否答应跨域，可自定义规则
    • 支撑各种恳求方法

    缺陷：

    • 会发生额定的恳求

综上三种方法的比较，咱们采用cors的跨域计划！

3.cors解决跨域

3.1.什么是cors

CORS 是一个W3C标准，全称是”跨域资源共享“（Cross-origin resource sharing）

它答应浏览器向跨源服务器，发出XMLHttpRequest恳求，然后克服了AJAX只能同源使用的约束。

CORS 需求浏览器和服务器同时支撑。现在，所有浏览器都支撑该功用，IE浏览器不能低于IE10。

  • 浏览器端：

    现在，所有浏览器都支撑该功用（IE10以下不可）。整个CORS通讯进程，都是浏览器主动完结，不需求用户参与。

  • 服务端：

    CORS通讯与Ajax没有任何不同，因而你不需求改变曾经的事务逻辑。只不过，浏览器会在恳求中带着一些头信息，咱们需求以此判别是否答应其跨域，然后在呼应头中参加一些信息即可。这一般经过过滤器完结即可。

3.2.原理有点复杂

浏览器会将Ajax恳求分为两类，其处理计划略有差异：

  • 简略恳求
  • 特别恳求

3.2.1.简略恳求

只要同时满意以下两大条件，就属于简略恳求：

（1) 恳求方法是以下三种方法之一：

  • HEAD
  • GET
  • POST

（2）HTTP 的头信息不超出以下几种字段：

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

当浏览器发现建议的Ajax恳求是简略恳求时，会在恳求头中带着一个字段：Origin!

【SpringBoot专题】SpringBoot配置CORS处理前后端分离的跨域问题

Origin中会指出当时恳求属于哪个域（协议+域名+端口），服务会根据这个值决定是否答应其跨域。

假如服务器答应跨域，需求在回来的呼应头中带着下面信息：

Access-Control-Allow-Origin: http://manage.leyou.com
Access-Control-Allow-Credentials: true
Content-Type: text/html; charset=utf-8
123
  • Access-Control-Allow-Origin：可接受的域，是一个具体域名或者*（代表恣意域名）
  • Access-Control-Allow-Credentials：是否答应带着cookie，默认情况下，cors不会带着cookie，除非这个值是true

有关cookie：

要想操作cookie，需求满意3个条件：

  • 服务的呼应头中需求带着Access-Control-Allow-Credentials并且为true;
  • 浏览器建议ajax需求指定withCredentials 为true;
  • 呼应头中的Access-Control-Allow-Origin一定不能为*，有必要是指定的域名;

3.2.2.特别恳求

不符合简略恳求的条件，会被浏览器断定为特别恳求,，例如恳求方法为PUT。

预检恳求

特别恳求会在正式通讯之前，添加一次HTTP查询恳求，称为”预检”恳求（preflight）。

浏览器先问询服务器，当时网页所在的域名是否在服务器的答应名单之中，以及能够使用哪些HTTP动词和头信息字段。只要得到肯定答复，浏览器才会发出正式的XMLHttpRequest恳求，不然就报错。

一个“预检”恳求的样板：

OPTIONS /cors HTTP/1.1
Origin: http://manage.leyou.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.leyou.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
12345678

与简略恳求相比，除了Origin以外，多了两个头：

  • Access-Control-Request-Method：接下来会用到的恳求方法，比如PUT
  • Access-Control-Request-Headers：会额定用到的头信息

预检恳求的呼应

服务的收到预检恳求，假如答应跨域，会发出呼应：

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://manage.leyou.com
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Max-Age: 1728000
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain
1234567891011121314

除了Access-Control-Allow-Origin和Access-Control-Allow-Credentials以外，这儿又额定多出3个头：

  • Access-Control-Allow-Methods：答应拜访的方法
  • Access-Control-Allow-Headers：答应带着的头
  • Access-Control-Max-Age：本次答应的有用时长，单位是秒，过期之前的ajax恳求就无需再次进行预检了

假如浏览器得到上述呼应，则认定为能够跨域，后续就跟简略恳求的处理是一样的了。

3.3.完结

虽然原理比较复杂，可是前面说过：

  • 浏览器端都有浏览器主动完结，咱们无需操心
  • 服务端能够经过拦截器统一完结，不用每次都去进行跨域断定的编写。

事实上，SpringMVC现已帮咱们写好了CORS的跨域过滤器：CorsFilter ，内部现已完结了方才所讲的断定逻辑，咱们直接用就好了。

在项目中编写一个装备类CorsConfig，并且注册CorsFilter：

/**
 * @Auther: csp1999
 * @Date: 2020/12/08/18:57
 * @Description: 跨域相关装备
 */
@Configuration
public class CorsConfig {
​
  /**
   * CORS跨域装备
   *
   * @return
   */
  @Bean
  public CorsFilter corsFilter() {
    // 1.new一个CORS装备实例
    CorsConfiguration corsConfiguration = new CorsConfiguration();
​
    // 1) 答应的域,不要写*，不然cookie就无法使用了
//     corsConfiguration.addAllowedOrigin("http://web.csp1999.com");
    // 答应的域的调集
    List<String> orginList = new ArrayList<>();
    orginList.add("http://web.csp1999.com");
    orginList.add("http://api.csp1999.com");
    corsConfiguration.setAllowedOrigins(orginList);
​
    // 2) 是否发送Cookie信息
    corsConfiguration.setAllowCredentials(true);
    // 3) 答应的恳求方法
    corsConfiguration.addAllowedMethod("OPTIONS");
    corsConfiguration.addAllowedMethod("HEAD");
    corsConfiguration.addAllowedMethod("GET");
    corsConfiguration.addAllowedMethod("PUT");
    corsConfiguration.addAllowedMethod("POST");
    corsConfiguration.addAllowedMethod("DELETE");
    corsConfiguration.addAllowedMethod("PATCH");
    // 4）答应的头信息
    corsConfiguration.addAllowedHeader("*");
​
    // 2.添加映射途径，咱们拦截全部恳求
    UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
    urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
​
    // 3.回来新的CorsFilter.
    return new CorsFilter(urlBasedCorsConfigurationSource);
   }
}

欢迎点赞评论，谢谢各位大佬了ヾ(◍∇◍)ﾉﾞ