目录
1、Proxy代理作用
2 、常见情况
3、应用方式
4、具体配置实例
5、配置思路
代理原理
总结
1、Proxy代理作用
proxy代理作用：前端服务器代理的作用是，告诉服务器任何未知请求（没有匹配到静态文件的请求），代理到一个另一个地址，从而解决跨域的问题。
2 、常见情况
前端在向后端进行资源请求的时候，后端若没有使用Cros中间件，则会出现跨域问题，解决问题的办法之一就是前端使用Proxy进行服务器代理。
3、应用方式
在使用vue-cli2创建的vue项目时，在config文件夹下的index.js文件中，可以在dev相关配置信息中的proxyTable里对一个或者多个服务器进行代理。
注：
proxyTable是vue-cli提供解决vue开发环境下跨域的方法，proxyTable的底层使用了http-proxy-middleware，他是http代理中间件，他依赖node.js，基本原理是用服务器代理解决跨域浏览器跨域。有时候在开发的时候，我们请求的后代接口和vue不在同一个域名产生了跨域，而后台服务器并未开启cors，这个时候需要配置proxyTable解决跨域问题。
4、具体配置实例
proxyTable:{//'api'就等于target，在链接里访问/api等同于http:/182.xx.xx.xx:8888/'/api':{target:'http://182.xx.xx.xxx:8888/',//服务器的接口地址secure:ture, //如果是https，需要开启这个选项changeOrigin:ture,//是否跨域请求？turepathRewrite:{'/^api':'api/' //如果真实接口里包含了/api，就需要这样配置//等价于/^api=/api+api==http://182.xx.xx.xxx:8888/api}}}
5、配置思路
在某次网络请求完整路径为 '/api/ynai/static/ai/'的时候，出现了跨域的问题，之后需要再前端对该网络请求进行一次服务器代理
具体配置如下：
①首先代理标志名，必须与请求路径中头部一致，示例代码如下：proxyTable：{ '/api' : { } }
②配置target参数，确定请求代理的服务器根路径，代码示例如下：
③根据需要确定ws（websocket代理）的布尔值
④配置changeOrigin，赋值为ture，允许跨域
⑤根据需要配置pathRewrite参数
若最终代理后的路径中不需要/api，那么需要配置pathRewrite的参数对路径进行重写为 ' '
代理原理：
假设有如下代理配置：
则：
1、发生网络请求时，代理配置文件会去正则匹配网络请求路径，是否与代理匹配（比如发生的请求为/aaa/static/ai/，代理配置了 '/aaa ',则匹配成功）
2、匹配成功后，代理配置生效，他将会请求/aaa/static/ai/,经过代理配置指定的方式处理，最后拼接到target指向的服务器根路径（http：///）后面
3、最终形成完整的请求路径（http：///static/ai），跨域问题也得以解决
总结：
前端进行服务器代理配置的视乎，必须保证代理配置文件能够匹配到axious请求的url，才能正确的将target指向的服务器地址与url拼接得到完整的跨域请求路径，进而才能够请求到远端的资源。
如果觉得《vue服务器代理proxyTable配置解决跨域》对你有帮助，请点赞、收藏，并留下你的观点哦！
