一、简介

  1. 跨域是指浏览器不能执行其他网站的脚本，是由于浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。<br />同源策略：是指协议、域名、端口都要相同，其中有一个不同都会产生跨域。

示例：
image.png

二、跨域流程

非简单请求（PUT、DELETE）等，需要先发送预检请求。
image.png
官方介绍：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

当未配置跨域时，预检请求即被禁止，响应头中只有content-length：
image.png image.png

三、跨域解决

3.1 使用nginx

image.png

3.2 配置当前请求允许跨域

添加响应头

  • Access-Control-Allow-Origin：支持哪些来源的请求跨域
  • Access-Control-Allow-Methods：支持哪些方法跨域
  • Access-Control-Allow-Credentials：跨域请求默认不包含cookie，设置为true可以包含cookie
  • Access-Control-Expose-Headers：跨域请求暴露的字段
    • CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。

  • Access-Control-Max-Age：表明该响应的有效时间为多少秒。在有效时间内，浏览器无须为同一请求再次发起预检请求。请注意，浏览器自身维护了一个最大有效时间，如果该首部字段的值超过了最大有效时间，将不会生效。

    通过网关统一配置

    在网关中创建跨域配置类：

    1. /**
    2. * 跨域配置
    3. *
    4. * @author maomaochong
    5. * @since 2021/12/21
    6. */
    7. @Configuration
    8. public class GulimallCorsConfiguration {
    9.   @Bean
    10.   public CorsWebFilter corsWebFilter() {
    11.       UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    13.       CorsConfiguration corsConfiguration = new CorsConfiguration();
    15.       // 跨域配置
    16.       // 允许任意请求头
    17.       corsConfiguration.addAllowedHeader("*");
    18.       // 允许任意请求方式
    19.       corsConfiguration.addAllowedMethod("*");
    20.       // 允许任意源
    21.       corsConfiguration.addAllowedOrigin("*");
    22.       // 允许携带cookie跨域，否则会丢失cookie
    23.       corsConfiguration.setAllowCredentials(true);
    25.       // "/**"代表任意路径都要做跨域配置
    26.       source.registerCorsConfiguration("/**", corsConfiguration);
    27.       return new CorsWebFilter(source);
    28.   }
    29. }

    重启网关，可以看到预检请求通过，响应头中的信息：
    image.png
    同时生成了新的登录请求：
    image.png

通过网关的 cors 全局配置

通过SpringCloud的 cors 全局配置的配置属性类GlobalCorsProperties，解决跨域问题。

在网关的配置文件中配置：

  1. spring:
  2.   cloud:
  3.     gateway:
  4.       globalcors: # 网关cors跨域设置
  5.         cors-configurations:
  6.           '[/**]': # gateway网关上所有的uri都应用下面的跨域设置
  7.             allowed-credentials: true # 允许携带认证信息
  8.             allowed-origins:
  9.               - "*" # 允许所有来源进行跨域访问
  10.             allowed-headers: "*" # 允许跨域请求里的head字段，设置为*是全部
  11.             allowed-methods: # 允许跨域的方法
  12.               - GET
  13.               - POST
  14.               - PUT
  15.               - DELETE
  16.               - OPTIONS
  17.             max-age: 3600