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

我是苏苏2025-02-16 9:28

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变量）

javascript 复制代码

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