Vue项目配置代理
前端向服务器发送请求时,经常会遇到跨域问题,那么什么是前端跨域呢?在vue项目中如何利用代理解决呢?
什么是跨域?
- JavaScript同源策略:当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。不同域之间相互请求资源,就算作“跨域”。同源策略要求源相同才能正常进行通信,即协议、域名、端口号都完全一致。**同源策略限制:**表单提交、AJAX请求等。
- 注意:跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了。
proxy代理解决跨域
- **原理:**浏览器是禁止跨域的,但是服务端不禁止,在本地运行npm run serve等命令时实际上是用node运行了一个服务器,因此proxyTable实际上是将请求发给自己的服务器,再由服务器转发给后台服务器,做了一层代理,因此不会出现跨域问题。
配置(vue.config.js)
-
方法一
- 优点:配置简单、请求资源时直接发给前端(8080)即可
- 缺点:不能配置多个代理,不能灵活的控制请求是否走代理
- 当请求了前端不存在的资源时,该请求会转发给服务器(优先匹配前端资源)
module.exports = {
devServer: {
proxy: 'http://localhost:5000',
}
}
-
方法二
- 优点:可以配置多个代理,且可以灵活的控制请求是否走请求
- 缺点:配置繁琐,请求资源时必须加前缀
module.exports = {
devServer: {
proxy: {
"/api": {
target: 'http://localhost:5000',
pathRewrite: { '^/api': '' },
ws: true,//用于支持websocket
changeOrigin: true
},
"/allCar": {
target: 'http://localhost:5001',
pathRewrite: { '^/allCar': '' },
ws: true,
changeOrigin: true
}
}
}
}
/*
changeOrigin设置为true时,服务器收到的请求头中的host为:http://localhost:5000
changeOrigin设置为false时,服务器收到的请求头中的host为:http://localhost:8080
changeOrigin默认为true
*/