SpringCloudGateway解决跨域问题

1.跨域问题详情

2.为什么会跨域?

官方定义：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

怎么出现的？

• 1、浏览器访问了一个业务 http://192.168.200.130/#/baseinfo/prop/list

• 2、这个页面上 有个ajax，要发给一个位置 ：http://192.168.200.1/admin/product/getCategory1

• 3、ajax想要请求的服务器位置和浏览器所在的当前页面位置，有一处不一样就会被CORS限制

  协议名://主机地址:端口号/访问路径?查询字符串

  协议名://主机地址:端口号 有一个不一样就算跨域

因此：跨域问题 是针对ajax的一种限制。

3.因为我使用了Gateway,所以说一下使用Gateway解决跨域问题

(1)浏览器会将ajax请求分为两类，其处理方案略有差异：简单请求、复杂请求。

简单请求

- 只要同时满足以下两大条件，就属于简单请求。：

- （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

Origin中会指出当前请求属于哪个域（协议+域名+端口）。服务会根据这个值决定是否允许其跨域。

一句话:

• 浏览器基于“同源策略”安全限制，ajax请求的源的地址，必须和浏览器当前所在的地址一样（协议名://主机地址:端口号）。
• 违反同源策略的所有ajax请求，请求发出去，但是服务器没有同意，浏览器不会把这次ajax的处理结果交给代码。
• 请求发一次:直接发真实请求

复杂请求

• 只要不是简单请求，就算复杂跨域

请求发两次

• 预检请求：options。只要预检通过，
• 真实请求：

(2)如果服务器允许跨域，需要在返回的响应头中携带下面信息：

• Access-Control-Allow-Origin: http://qbb.it.com

• Access-Control-Allow-Credentials: true

• Content-Type: text/html; charset=utf-8

• Access-Control-Allow-Origin：可接受的域，是一个具体域名或者*，代表任意

• Access-Control-Allow-Credentials：是否允许携带cookie，默认情况下，cors不会携带cookie，除非这个值是true

• 注意：

  • 如果跨域请求要想操作cookie，需要满足3个条件：
  • 服务的响应头中需要携带Access-Control-Allow-Credentials并且为true。
  • 浏览器发起ajax需要指定withCredentials 为true
  • 响应头中的Access-Control-Allow-Origin一定不能为*，必须是指定的域名

4.解决方案

服务器允许跨域即可 所以gateway网关配置如下:

• yml配置文件方式

spring:
  cloud:
    gateway:
      globalcors:
        cors-configurations:
          '[/**]':
            allowedOrigins: "*"  #允许所有ip跨域访问
            allowedMethods: "*"  #允许所有请求方式
            allowedHeaders: "*"  #允许任何头进行跨域
            allowCredentials: true #允许携带cookie
            ## 以上配完成，简单跨域复杂跨域都允许。

• Java配置类方式

package com.qbb.qmall.gateway.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;

/**
 * @author QiuQiu&LL (个人博客:https://www.cnblogs.com/qbbit)
 * @version 1.0
 * @date 2022-05-18  16:01
 * @Description:
 */
@Configuration
public class CorsConfig {
    @Bean
    public CorsWebFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true); // 是否允许携带cookie
        config.addAllowedOrigin("*"); // 可接受的域，是一个具体域名或者*（代表任意域名）
        config.addAllowedHeader("*"); // 允许携带的头
        config.addAllowedMethod("*"); // 允许访问的方式

        // 基于Url的跨域配置
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        // 针对所有的请求Url,采用上面的Config配置
        source.registerCorsConfiguration("/**", config);

        return new CorsWebFilter(source);
    }
}