前后端分离项目,非同源地址会发生跨域问题。因此需要解决跨域问题
总的来说,解决方案:
- NGINX解决跨域问题
- 在网关处解决跨域问题
这里记录自己在网关处解决跨域的方法:
技术:Springcloud Gateway
springboot版本:2.1.4
方法1:
在application.xml:
spring:
cloud: # 跨域配置
gateway:
globalcors:
cors-configurations:
'[/**]': # 匹配所有请求
allowedOrigins: "*" #跨域处理 允许所有的域
allowedMethods: # 支持的方法
- GET
- POST
- PUT
- DELETE
这样可以解决跨域的问题。
方法2:
在网关处新增配置类:
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.util.pattern.PathPatternParser;
/**
* 跨域允许
*/
@Configuration
public class CorsConfig {
@Bean
public CorsWebFilter corsFilter() {
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true); // 允许cookies跨域
config.addAllowedOrigin("*");// #允许向该服务器提交请求的URI,*表示全部允许,在SpringMVC中,如果设成*,会自动转成当前请求头中的Origin
config.addAllowedHeader("*");// #允许访问的头信息,*表示全部
config.setMaxAge(18000L);// 预检请求的缓存时间(秒),即在这个时间段里,对于相同的跨域请求不会再预检了
config.addAllowedMethod("OPTIONS");// 允许提交请求的方法类型,*表示全部允许
config.addAllowedMethod("HEAD");
config.addAllowedMethod("GET");
config.addAllowedMethod("PUT");
config.addAllowedMethod("POST");
config.addAllowedMethod("DELETE");
config.addAllowedMethod("PATCH");
org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource source =
new org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource(new PathPatternParser());
source.registerCorsConfiguration("/**", config);
return new CorsWebFilter(source);
}
}
可以解决跨域问题。
记录@CrossOrigin发生的问题
在各个微服务对应的Controller,在微服务的Controller中,一般会加上注解@CrossOrigin
当在网关处已经配置了跨域解决时,此时前端会提示:but only one is allowed.
即:重复处理跨域请求
因此只需要去掉这个@CrossOrigin即可