✅P46-47_配置网关路由与路径重写-配置跨域
大约 4 分钟
一、新增菜单
启动renren-fast-vue 前端项目
1.1 新增商品系统菜单
1.2 新增分类维护菜单
二、API网关配置和跨域配置
2.1 前端工程配置API网关作为唯一接口
打开 static -> config -> index.js 配置统一请求地址
// api网关作为接口请求地址，由网关分发到不同服务
window.SITE_CONFIG['baseUrl'] = 'http://localhost:88/api';
2.2 将renren-fast接入网关服务配置
这里是因为配置第一步的网关地址后，renren-fast-vue 本身要请求到 renren-fast 的请求也会转到网关，所以这里要配置网关转发到renren-fast的接口。
说明：
因为我在renren-fast依赖中引入common后，发现注册中心的服务名称是cfmall-common，而renren-fast并没有注册进去，导致验证码报404，所以采取以下做法！
2.1.1 将renren-fast注册为nacos服务
- 在
renren-fast的pom.xml中引入Nacos依赖
<dependency>
<groupId>com.alibaba.cloud</groupId>
<artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
<version>2.1.0.RELEASE</version>
</dependency>
<dependency>
<groupId>com.alibaba.cloud</groupId>
<artifactId>spring-cloud-alibaba-nacos-config</artifactId>
<version>2.1.0.RELEASE</version>
</dependency>
- 在
application.yml配置nacos地址和服务名称
spring:
application:
name: renren-fast
cloud:
nacos:
discovery:
server-addr: 127.0.0.1:8848
- 主启动类增加开启注解
@EnableDiscoveryClient
@SpringBootApplication
public class RenrenApplication {
public static void main(String[] args) {
SpringApplication.run(RenrenApplication.class, args);
}
}
2.1.2 网关增加路由断言转发不同服务
cfmall-gateway模块 前端 /api/** 请求会被转发到renren-fast服务 /renren-fast/** 前端 /api/product/** 请求会被转发到cfmall-product服务 /product/**application.properties
# 应用名称
spring.application.name=cfmall-gateway
spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848
server.port=88
application.yml
spring:
cloud:
gateway:
routes:
- id: test_route
uri: https://www.baidu.com
predicates:
- Query=uri,baidu
- id: qq_route
uri: https://www.qq.com
predicates:
- Query=uri,qq
- id: admin_route
uri: lb://renren-fast
predicates:
- Path=/api/**
filters:
- RewritePath=/api/(?<segment>/?.*), /renren-fast/$\{segment}
**bootstrap.properties **
spring.cloud.nacos.config.server-addr=127.0.0.1:8848
## 在Nacos页面新建命名空间后生成的id
spring.cloud.nacos.config.namespace=e0589a0b-9de1-4f6a-b014-5c37f75abb43
2.3 网关服务配置跨域
2.3.1 配置类
在 cfmall-gateway 中创建跨域配置类
package com.gyz.cfmall.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;
/**
* @Description
* @Author GongYuZhuo
* @Version 1.0.0
*/
@Configuration
public class CfmallCorsConfiguration {
@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);
}
}
2.3.2 renren-fast跨域配置删除
删除 src/main/java/io/renren/config/CorsConfig.java 中的配置内容，这里会导致请求头添加重复，导致跨域失败！
三、SpringCloud Gateway网关的路由断言配置
官方地址：
3.1 跨域概念
跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。
同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域；
3.2 跨域流程
非简单请求（PUT，DELETE）等，需要先发送预检请求
3.3 解决跨域
3.3.1 使用nginx部署为同一域
3.3.2 配置当次请求允许跨域
添加响应头
Access-Control-Allow-Origin：支持哪些来源的请求跨域Access-Control-Allow-Methods：支持哪些方法跨域Access-Control-Allow-Credentials：跨域请求默认不包含cookie，设置为true可以包含 cookieAccess-Control-Expose-Headers：跨域请求暴露的字段- CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段： Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。
Access-Control-Max-Age：表明该响应的有效时间为多少秒。在有效时间内，浏览器无须为同一请求再次发起预检请求。请注意，浏览器自身维护了一个最大有效时间，如果 该首部字段的值超过了最大有效时间，将不会生效。