gulimall——网关配置及跨域问题的解决（四）

一、前后端分离导致的请求路径问题

后端有各种微服务&＃xff0c;不同的例如Product&＃xff08;10002&＃xff09;&＃xff0c;Order(9001)&＃xff0c;Ware(11001)。

因此通过WebSocket访问存在两个问题&＃xff1a;

1. 不同服务有不同的端口&＃xff0c;难以管理&＃xff0c;很容易出错
2. 分布式情况下&＃xff0c;同一个服务会有多个实例&＃xff0c;每个实例的端口也不一样&＃xff0c;例如Product就可以有10001&＃xff0c;10002&＃xff0c;10003等等

因此将前端请求的基准地址改为88端口&＃xff0c;发送给网关同一处理。

// api接口请求地址
window.SITE_CONFIG[&＃39;baseUrl&＃39;] &＃61; &＃39;http://localhost:88/api&＃39;;


再通过网关重写路径http://localhost:88/api/captcha.jpg  &＃61;&＃61;&＃61;&＃61;>  http://localhost:8080/renren-fast/captcha.jpg

#将路径为Path&＃61;/api/**转发至后台管理- id: admin_routeuri: lb://renren-fast #lb表示负载均衡predicates:- Path&＃61;/api/**filters:- RewritePath&＃61;/api/(?.*), /renren-fast/$\{segment}#RewritePath路径重写#http://localhost:88/api/captcha.jpg &＃61;&＃61;&＃61;&＃61;> http://localhost:8080/renren-fast/captcha.jpg


不过就此出现了跨域的问题&＃xff1a;

 二、跨域问题

跨域&＃xff1a;指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的&＃xff0c;是浏览器对Javascript施加的安全限制。

同源策略&＃xff1a;是指协议、域名、端口都要相同&＃xff0c;其中有一个不同都会产生跨域。

跨域的流程如下&＃xff1a;

三、跨域解决方法

方法1、使用Nginx部署为同一域 

方法2、配置当此请求允许跨域

在网关设置一个corsWebFilter&＃xff0c;为所有的请求添加响应头&＃xff0c;允许跨域。

&＃64;Configuration
public class GulimallCorsConfiguration {&＃64;Beanpublic CorsWebFilter corsWebFilter(){UrlBasedCorsConfigurationSource source&＃61;new UrlBasedCorsConfigurationSource();CorsConfiguration corsConfiguration &＃61; new CorsConfiguration();//跨域请求暴露的字段corsConfiguration.addAllowedHeader("*");//支持哪些方法跨域corsConfiguration.addAllowedMethod("*");//支持哪些来源的请求跨域corsConfiguration.addAllowedOrigin("*");//跨域请求默认不包含COOKIE&＃xff0c;设置为true可以包含 COOKIEcorsConfiguration.setAllowCredentials(true);source.registerCorsConfiguration("/**",corsConfiguration);return new CorsWebFilter(source);}
}


之后每次请求的请求头结果如下&＃xff1a;