谷粒商城40 - 后端-商品服务-API-三级分类-网关统一配置跨域

跨域的概念

非简单请求的预检请求流程

简单请求类型

简单请求的内容类型, 必须是下列之一 . 而登录的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项目中的跨域配置注释掉 . 重启后端的服务

再次重启后端服务. 再次登录, 即可正常登录