Vuecli 文件vue.config.js 实现代理跨域

Vue脚手架代理跨域

1.官方参考:
如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
2.在根目录(package.json同级)下创建vue.config.js;
3.用commonjs的js模块化写法

module.exports={
	devServer:{
		proxy:{
			'/api'{//名字随便取,加到url前面的,如果只有自己的api,可以直接在axios在Vue继承的时候写个baseURL:"/api'
				target:'后台url',
				ws:booleab,//是否使用websocket
				changeOrigin:true,//这个是关键,看名字也知道,跨域的重点,允许代理服务器进行代理请求,
    			//同源策略是浏览器的,所以服务器不存在这样的问题
    			//因为这个/api是用来识别不同的target的标记,所以我们要替换它成空字符串,没有换的话,可以看cmd的proxy报错,路径问题
    			pathRewrite:{
    				'^/api':''
    			}
			}
		}
	}
}

如果是多种的API,需要在每一次的get(),post()中的url前面加上/api(你取的名字),每一个/any,都可以匹配一个target,根据自己需求增加就行了,直接处理跨域开心的像个200斤的宝宝.