vue2配置proxy（配置多个代理），使得axios.defaults.withCredentials = true生效request header携带cookie

因为会存在一个项目后端多个服务器。所以需要配置多个代理
Tip
1.vue.config.js正常配置。但是匹配名字长的放在上面
2.request.js文件最后不要配置baseURL为其他的就配成‘/’。
3.接口调用的时候url记得前面拼上需要匹配的代理字段

在vue.config.js文件里面配置

devServer: {
		proxy: {  //配置跨域
			"/recognition": {
				target: '你的真实url',  //后台接口
				changeOrigin: true, // 默认false，是否需要改变原始主机头为目标URL，是否跨域
				ws: true,		//websocket支持
			},
			"/api": {
				target: '你的真实url',  //后台接口
				changeOrigin: true, // 默认false，是否需要改变原始主机头为目标URL，是否跨域
				secure: false, // 如果是https接口，需要配置这个参数,
				pathRewrite: {
					"/api": "" // 既能有正确的标识，又能在请求接口的时候去掉
				},
				//方便在浏览器查看真实的地址。因为配置代理后查看不到访问的真实地址
				onProxyRes(proxyRes, req, res) {
					const realUrl = "你的真实url'" + req.url || ''; // 真实请求网址
					proxyRes.headers['A-Real-Url'] = realUrl; // 添加响应标头(A-Real-Url为自定义命名)，在浏览器中显示
				},
			},
		},
		//https:true
	},
	

在request.js文件里面配置

axios.defaults.baseURL = "/" //这个不需要注释。代理的时候会根据这个来删掉
//axios.defaults.baseURL = '你的真实url'//如果有这段代码需注释。因为会跟proxy那块配置冲突
axios.defaults.withCredentials = true;//允许axios请求携带cookie等凭证

调用api

//使用第一个代理
 return request({
        url: "recognition/card/cards_by_strategy/",
        method: "get",
      })
 //使用第二个代理
 return request({
        url: "api/FrontService/GetUserInfo",
        method: "get",
      })

在proxy中配置了onProxyRes需重新运行一下项目。这样会看response header中查看到自己新增的属性