前端vue解决跨域之服务器代理

---

Proxy代理作用:

前端服务器代理的作用是，告诉服务器将任何未知请求(没有匹配到静态文件的请求)，代理到一个另一个地址，从而解决跨域的问题

---

常见情况：

前端在向后端进行资源请求的时候，后端若未使用Cros中间件，则会出现跨域请求的问题，解决问题的办法之一就是我们前端使用Proxy进行服务器代理

---

使用方式：

在vue-cli2项目的config文件夹下的index.js文件中，可以在dev相关配置信息中的proxyTable里对一个或者多个服务器进行代理

具体配置如下例所示

代理具体配置示例：

// 代理配置
proxyTable: {
	'/api': {
	    target: 'http://10.34.67.144:7777',
	    ws: true,
	    changeOrigin: true,
	    pathRewrite: {
	    	'^/api': '/'
	    }
	  },
	'/model': {
	    target: 'http://10.34.67.144:6666',
	    ws: true,
	    changeOrigin: true
	}
}

---

配置参数说明：

• target：target的值是请求服务器的根路径（代理至关重要的参数）
• ws： 布尔值，确定websocket是否代理
• changeOrigin：创建虚拟服务器，值为true时代表允许跨域
• pathRewrite：路径重写，修改代理的路径为目标值
• ……

---

配置思路：

1. 在某网络请求完整路径为’/api/ynai/static/ai/'的时候，出现了跨域的问题，之后则需要在前端对该网络请求进行一次服务器代理
2. 接下来，对上面请求进行代理的具体配置
3. 首先代理标志名，必须与请求路径中头部一致，代码示例如下：proxyTable: { '/api': {} }
4. 配置target参数，确定请求代理的服务器根路径，代码示例如下：

proxyTable: {
	'/api': {
		target: 'http://www.baidu.com/'
	}
}

5. 根据需要确定ws（websocket代理）的布尔值

proxyTable: {
	'/api': {
		target: 'http://www.baidu.com/',
		ws: true
	}
}

6. 配置changeOrigin，赋值为true，允许跨域

proxyTable: {
	'/api': {
		target: 'http://www.baidu.com/',
		ws: true,
		changeOrigin: true
	}
}

7. 根据需要配置pathRewrite参数
   若最终代理后的路径中不需要/api，那么需要配置pathRewrite参数对路径进行重写为’’

proxyTable: {
	'/api': {
		target: 'http://www.baidu.com/',
		ws: true,
		changeOrigin: true,
		pathRewrite: {
			'^/api': ''
		}
	}
}

---

代理原理：

假设有如下代理配置：

proxyTable: {
	'/aaa': {
		target: 'http://www.baidu.com/',
		ws: true,
		changeOrigin: true,
		pathRewrite: {
			'^/aaa': '' /将/aaa重写为'',等价于去掉/aaa
		}
	}
}

则：

1. 发生网络请求时，代理配置文件会去正则匹配网络请求路径，是否与代理匹配（比如发生的请求为/aaa/static/ai/，代理配置了’/aaa’，则匹配成功）
2. 匹配成功后，代理配置生效，它会将请求/aaa/static/ai/，经过代理配置指定的方式处理，最后拼接到target指向的服务器根路径(http://www.baidu.com/)后面
3. 最终形成完整的请求路径(http://www.baidu.com/static/ai)，跨域问题也就得以解决

---

总结：

前端进行服务器代理配置的时候，必须保证代理配置文件能够匹配到axios请求的url，才能够正确的将target指向的服务器地址与url拼接得到完整的跨域请求路径，进而才能够请求到远端的资源