项目中使用到spring cloud,前端使用vuex框架,PC网页版。
在测试环境中发现,每个post或者get的请求之前都有同一样一个Preflight的请求。查看了Preflight请求的request method是option。
Preflight request就要需要解释一下了,当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时,资源会发起一个跨域 HTTP 请求。出于安全原因,浏览器限制从脚本内发起的跨源HTTP请求。 例如,XMLHttpRequest和Fetch API遵循同源策略。 本来post是一个“简单请求”但是因为我需要带authorization的header,所以就变成了“复杂请求”,而复杂请求就需要先发送options请求来询问你的服务器,允不允许你发送本次请求。而这次options请求就叫 Preflight request。
原有的架构存在请求页面的端口与请求数据的端口不一致,如下图架构,页面端口是8000,请求数据gateway的端口是8083.
优化后的架构,由nginx统一代理请求页面的端口和请求数据的端口为8000.如 下图
再次打开页面,只有一个post的请求,不再存在option请求,如下图:
总结:
浏览器端的请求直接到gateway是不合理的,合理的设计是先通过nginx这一层再到gateway,nginx可以做防刷、缓存等策略,对后端gateway服务起到保护的作用。