vue开发06：前端通过webpack配置代理处理跨域问题

1.定义

        在浏览器尝试请求不同源（域名、协议、端口号不同）的资源时，浏览器的同源策略会阻止这种跨域请求。（比如前端端口15500，后端端口5050，前端界面不可以直接调用5050端口）

2.解决方案

        使用前端代理，前端发送请求时发到前端端口上（15500），通过webpack代理到后端端口5050上

3.效果

• 请求url /api/GetDatas
• 实际请求url http://localhost:5050/api/GetDatas （F12还是显示请求的是15500）

4.配置方法

        在\config\index.js中修改proxyTable

（其实是本质上修改的是webpack.dev.conf.js的devServer:proxy变量）

proxyTable: {'/api': {   //发送的请求中带有/api的，则执行下面的代理规则target: 'http://localhost:5050', changeOrigin: true, //（允许跨域设置）pathRewrite: {'^/api': '/api' } }
}

实现原理：

• 1.获取请求路径：/api/GetDatas
• 2.请求路径右边替换左边（pathRewrite）：/api/GetDatas
• 3.拼接target+请求路径 http://localhost:5050/api/GetDatas