需求:使用反向代理解决跨域请求
一,跨域问题产生的原因
浏览器为了保证用户信息的安全,防止恶意的网站窃取数据,而引入了同源策略,对于以下非同源情况,都会禁止ajax请求:
- 域名/IP不一致;
- 端口号不一致;
- 协议不同;
- 二级域名不同。
二,使用反向代理解决跨域
目前比较通用的方法是CORS和反向代理,CORS对于前端小伙伴来说是一般无感的(某些特殊业务需求中使用低版本浏览器可能不支持CORS),实现CORS的关键在于服务器,只要服务器实现CORS接口,就可以实现跨域通信。简言之,CORS依赖后端,这确实有点不爽,今天我们来阐述通过反向代理由前端小伙伴们自己来解决跨域问题。
1,原理
通过使用web服务器,对其他服务器资源进行反向代理,对请求资源进行中转,来/" 欺骗 "/浏览器,使浏览器感觉不到资源来自于其他服务器,以达到解决跨域的效果。
2,开发环境配置(vue为例)
// 在config index.js里面配置如下代理
// 你的服务器地址+端口号比如 http://90.0.19.244:8068
const API_SERVER = "http://90.0.19.244:8068"
dev: {
proxyTable: {
'/api/**': {
target: API_SERVER,
changeOrigin: true,
pathRewrite: { "^/api": "" }
}
},
3,测试/生产环境配置(nginx为例)
// 在nginx服务器的配置文件(.conf)的server里面增加配置
location /api {
rewrite ^.+api/?(.*)$ /$1 break;
proxy_pass http://90.0.19.244:8068;
}
关于配置里面/api的说明:作为一种保护机制,我们可以在请求url上增加base_url,以避免接口被随意使用,如果不考虑这种机制,上面的/api可以直接改为/,并同时需要去掉pathRewrite/rewrite相关配置。