谷粒商城 (十一) --------- 商品服务 API 三级分类 ② 前后端联调配置

---

一、启动人人开源

将人人开源的前后端分别启动

二、新增菜单

注意可以配置好分类维护的菜单路由，授权标识可以先放一放

三、前端配置网关路由

在 src modules 下创建 product 目录及下面新建 category.vue 组件，然后输入 vue 生成 vue 模板

编写三级分类数据呈现的相关代码

但是其默认发送到人人开源的后台，我们需要让其转发到网关，然后分发给各个微服务

接下来我们需要将 renren-fast 注册到 Nacos 注册中心中

接下来配置 gateway 路由规则

重启服务，访问 renren 前端的话会发现匹配不成功，因为浏览器默认不允许跨域

四、网关统一配置跨域

跨域： 指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对 javascript 施加的安全限制。

同源策略： 是指协议，域名，端口都要相同，其中有一个不同都会产生跨域。

关于跨域处理

A、使用nginx部署为同一域

B、配置当次请求允许跨域

在开发阶段主要用第二种方式

我们只需要在网关服务中按照上面要求编写跨域配置类即可，如图

package com.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;

@Configuration
public class GulimallCorsConfiguration {
    @Bean
    public CorsWebFilter corsWebFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();

        // 1、配置跨域
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.setAllowCredentials(true);
        // 所有请求都配置跨域
        source.registerCorsConfiguration("/**", corsConfiguration);

        return new CorsWebFilter(source);
    }
}