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请求的源的地址，必须和浏览器当前所在的地址一样（协议名://主机地址:端口号）。
• 违反同源策略的所有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);
}
}