赞
踩
在项目开发中,有时候会遇到跨域的问题,这个问题一般是后台来进行解决,不过前台也能解决,通过配置代理的方式来解决。在vue.config.js进行配置。跨域出现的原因:由于同源策略的影响,请求服务器时,如果域名、协议、端口号有一个不一样就会产生跨域的问题,前端代理的解决原理,通过vue-cli搭建一台代理服务器,然后前台请求代理服务器时,有代理服务器去请求数据,两个服务器直接没有同源策略,可以直接访问。
在vue.config.js中添加如下配置:
- devServer:{
- proxy:"http://localhost:5000"
- }
说明:
优点:配置简单,请求资源时直接发给前端(8080)即可。
缺点:不能配置多个代理,不能灵活的控制请求是否走代理。
工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器 (优先匹配前端资源)
编写vue.config.js配置具体代理规则:
- module.exports = {
- devServer: {
- proxy: {
- '/api1': {// 匹配所有以 '/api1'开头的请求路径
- target: 'http://localhost:5000',// 代理目标的基础路径
- changeOrigin: true,
- pathRewrite: {'^/api1': ''}
- },
- '/api2': {// 匹配所有以 '/api2'开头的请求路径
- target: 'http://localhost:5001',// 代理目标的基础路径
- changeOrigin: true,
- pathRewrite: {'^/api2': ''}
- }
- }
- }
- }
- /*
- changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000
- changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080
- changeOrigin默认值为true
- */
说明:
优点:可以配置多个代理,且可以灵活的控制请求是否走代理。
缺点:配置略微繁琐,请求资源时必须加前缀。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。