跨域的概念
非简单请求的预检请求流程
简单请求类型
简单请求的内容类型, 必须是下列之一 . 而登录的post请求, 它是属于application/json的
非简单请求,都需要发送一个预检请求,就是option方式的请求
跨域解决方案之一:使用nginx部署为同一个域
把前端项目和网关项目, 都放在nginx中.
不直接访问前端项目, 而是访问nginx.
登录的时候, 访问前端项目是静态请求, 要到登录后端时候 ,是动态请求, 由nginx反向代理到网关. 但此方法只适合于部署的时候, 不适合开发环境
跨域解决方案之一:后端服务配置当次请求允许跨域
后端返回响应头, 配置请求跨域的配置, 具体的配置如下图所示
解决方案:在网关中写一个过滤器, 在给前端响应数据之前, 添加跨域的响应头
网关配置跨域
在网关项目中, 配置跨域的Filter
核心代码如下
//允许跨域的请求头
corsConfiguration.addAllowedHeader("");
//允许跨域的请求方式
corsConfiguration.addAllowedMethod("");
//允许跨域的请求来源
corsConfiguration.addAllowedOrigin("*");
//允许携带cookie跨域
corsConfiguration.setAllowCredentials(true);
完整代码如下
注意: CorsWebFilter
要用reactive
包下面的
package com.atguigu.gulimall.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;
/**
* 类名称:CorsConfiguration
* 类描述:TODO
*
* @author:
* 创建时间:2020/8/4 20:29
* Version 1.0
*/
@Configuration
public class GulimallCorsConfiguration {
@Bean
public CorsWebFilter corsWebFilter(){
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration corsConfiguration = new CorsConfiguration();
//允许跨域的请求头
corsConfiguration.addAllowedHeader("*");
//允许跨域的请求方式
corsConfiguration.addAllowedMethod("*");
//允许跨域的请求来源
corsConfiguration.addAllowedOrigin("*");
//允许携带cookie跨域
corsConfiguration.setAllowCredentials(true);
///**代表 允许任意的请求路径进行跨域
source.registerCorsConfiguration("/**",corsConfiguration);
return new CorsWebFilter(source);
}
}
注意在后端未配置跨域的时候, 请求的响应头是空的.
重启后端服务后, 再次发生登录的请求. 看到有响应头的信息,. 但是有重复的两次. 是因为renren-fast项目中, 也配置了跨域的响应
把renren-fast项目中的跨域配置注释掉 . 重启后端的服务
再次重启后端服务. 再次登录, 即可正常登录