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

深碍√TFBOYSˉ_ 2023-03-05 15:58 10阅读 0赞

### 文章目录 ###

*   *   *  跨域的概念
         *   *  跨域解决方案之一:使用nginx部署为同一个域
             *  跨域解决方案之一:后端服务配置当次请求允许跨域
         *  网关配置跨域

### 跨域的概念 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]  
非简单请求的预检请求流程  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1][]  
简单请求类型  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2][]  
简单请求的内容类型, 必须是下列之一 . 而登录的post请求, 它是属于application/json的  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3][]  
非简单请求,都需要发送一个预检请求,就是option方式的请求  
![20200804201904811.png][]

#### 跨域解决方案之一:使用nginx部署为同一个域 ####

把前端项目和网关项目, 都放在nginx中.  
不直接访问前端项目, 而是访问nginx.  
登录的时候, 访问前端项目是静态请求, 要到登录后端时候 ,是动态请求, 由nginx反向代理到网关. 但此方法只适合于部署的时候, 不适合开发环境  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 4][]

#### 跨域解决方案之一:后端服务配置当次请求允许跨域 ####

后端返回响应头, 配置请求跨域的配置, 具体的配置如下图所示  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 5][]  
解决方案:在网关中写一个过滤器, 在给前端响应数据之前, 添加跨域的响应头

### 网关配置跨域 ###

在网关项目中, 配置跨域的Filter  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 6][]

核心代码如下

> //允许跨域的请求头  
> 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);
        }
    
    
    
    }

注意在后端未配置跨域的时候, 请求的响应头是空的.  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 7][]  
重启后端服务后, 再次发生登录的请求. 看到有响应头的信息,. 但是有重复的两次. 是因为renren-fast项目中, 也配置了跨域的响应  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 8][]  
把renren-fast项目中的跨域配置注释掉 . 重启后端的服务  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 9][]  
再次重启后端服务. 再次登录, 即可正常登录  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 10][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20230208/2854d2ed48774f1ab3fe880a06671fbc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20230208/651f95c0472e489a9d85561543a2e03a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2]: /images/20230208/694bd1fc132e427a807cc29f7a9a3e7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3]: /images/20230208/1c67e3194dba4594bfc616142dbce006.png
[20200804201904811.png]: /images/20230208/98ecabc4c5254a8ea49dbe266245d998.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 4]: /images/20230208/e5048fad318b47a99ed6f864ef6dbd82.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 5]: /images/20230208/40fa0f95045842f8a49bb0b14d08fa7c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 6]: /images/20230208/6d96429a786c4d74ac40e0b1318fd733.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 7]: /images/20230208/3ca05fd0df7c48398a56e129c9533ade.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 8]: /images/20230208/9da1685bd6634d908d27d48278e1ff1c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 9]: /images/20230208/8995209cb46048f8b0268c8be62621de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 10]: /images/20230208/1537a28928ec41d78c61f6f2812a077d.png