当前位置：首页 > article >正文

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

article 2025/2/13 13:26:06

1.定义

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

2.解决方案

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

3.效果

请求url /api/GetDatas
实际请求url http://localhost:5050/api/GetDatas

4.配置方法

在\config\index.js中修改proxyTable

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

proxyTable: {
    '/api': {   //发送的请求中带有/api的，则执行下面的代理规则
        target: 'http://localhost:5050', 
        changeOrigin: true, //（允许跨域设置）
        pathRewrite: {
            '^/api': '/api' 
        } 
    }
}
// 实现原理：
// 1.首先得出target+pathRewrite的^api的内容 = http://localhost:5050/api
// 2.将原来请求中的/api替换为上述内容 /api/GetDatas =>  http://localhost:5050/api/GetDatas

实现原理：

1.首先得出target+pathRewrite的^api的内容 = http://localhost:5050/api

2.将原来请求中的/api替换为上述内容 /api/GetDatas => http://localhost:5050/api/GetDatas

查看全文

http://www.kler.cn/a/543520.html