谷粒商城P46配置网关路由及路径重写及跨域配置

1.启动renren-fast

2. 启动renren-fast-vue项目

在VSCode打开renren-fast-vue文件夹，新建终端并输入命令

npm run dev

3.编辑renren后台管理系统页面

1、登录 http://localhost:8001,登录账号密码均为 admin

2、建立一级目录商品系统以及二级菜单分类维护

3、在VSCode下的 /src/views/modules 目录下创建目录product，并在product目录下创建文件 category.vue

<template>
  <div class=""></div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    getMenus() {
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get",
      }).then(data =>{
          console.log("成功获取到菜单数据...",data)
      });
    },
  },

  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},

  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */
</style>

4、在 static/config/index.js 文件中修改地址为 http://localhost:88/api

5、将renren-fast注册到nacos服务注册中心

5.1 导入依赖

<dependency>
	<groupId>com.atguigu</groupId>
	<artifactId>gulimall-common</artifactId>
	<version>0.0.1-SNAPSHOT</version>
</dependency>

5.2 在application.yml 中加入如下配置

spring:
  application:
    name: renren-fast
  cloud:
    nacos:
      discovery:
        server-addr: 127.0.0.1:8848

5.3 开启服务注册权限，在启动类上加上如下注解

6、配置网关的路由规则

在gulimall-gateway项目的application.yml文件中加入如下配置

spring:
  cloud:
    gateway:
      routes:
        - id: admin_route
          uri: lb://renren-fast  # 网关负载均衡的发送到renren-fast
          predicates:
            - Path=/api/**
          filters:
            - RewritePath=/api/(?<segment>.*),/renren- fast/$\{segment}  #实现路径重写

## 所有前端项目带  /api
## http://localhost:88/api/captcha.jpg
## http://localhost:8080/renren-fast/captcha.jpg

7、解决跨域问题

7.1 注销掉renren-fast项目自带的跨域配置

7.2 在gulimall-gateway项目下的gateway目录下新建config目录，并新建GulimallCorsConfig文件
注意：包别导错了

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;

@Configuration
public class GulimallCorsConfig {

    @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);
    }
}

8、重启gulimall-gateway、renren-fast项目，重新登录即可