一、启动人人开源
将人人开源的前后端分别启动
二、新增菜单
注意可以配置好分类维护的菜单路由,授权标识可以先放一放
三、前端配置网关路由
在 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);
}
}