vue-cli项目设置proxyTable解决开发环境跨域问题
vue-cli项目设置proxyTable解决开发环境跨域问题
余生杂货铺什么是跨域?
- 世界上本没有跨域
浏览器有一个叫做同源策略的东西。同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
同源策略规定了如果两个页面的协议、域名、端口中任意一个不相等,就认为两个页面具有不相同的源
两个不同源的页面资源交互会受到浏览器的同源策略限制,也就出现了我们说的跨域问题
配置proxyTable解决跨域问题
我们使用vue-cli生成的项目目录里,config下面的index.js有个proxyTable属性
然后我们做如下设置
1 | proxyTable: { |
注意以上配置只在开发环境起作用
webpack-dev-server更加详细的配置: https://webpack.js.org/configuration/dev-server/#devserver-proxy
那么为什么我们设置这个proxyTable可以帮我们解决跨域问题呢?
其实vue-cli里的这个设置来自于其集成的插件 http-proxy-middleware
github: https://github.com/chimurai/http-proxy-middleware
这个插件可以帮我们在本地虚拟一个服务器接收请求并代替你发送该请求,因为是在服务端替我们发请求所以就没有我们烦恼的跨域问题了,当然这只适用于开发环境。
项目上线怎么办?
我们通过配置proxyTable解决了本地开发环境请求接口跨域的问题,但是我们项目上线还是要替换成线上的接口地址的。如果我们的前端项目合后端服务不在同一个域名下,我们可以使用目前比较流行的 CORS 来处理跨域。这里就不展开讲了。
前端如何配合服务端进行CORS跨域
我们可以利用webpack配置的环境变量来实现开发环境和打包后的api区分
假设我们使用axios进行请求发送
我们可以做如下配置
1 | import axios from 'axios'; |
这样配置后我们开发环境中就可以使用proxyTable代理请求,项目打包后请求地址就会被替换成线上的api地址。
假设我们开发环境请求的api地址为 http://www.example.com/api/list
线上环境请求的api地址为 http://www.baidu.com/api/list
那么我们发请求的时候只需要这么写
1 | server.get("/api/list").then(res => { |
这样我们项目打包后,webpack就可以自动帮我们把请求地址替换成线上的地址了。
作者:萧雪圣
链接:https://www.jianshu.com/p/de7d3f0520b4
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。