Webpack 配置 proxy 代理解决跨域问题

Posted 2023-03-24

参考技术A JS跨域及解决方案 介绍了跨域的基本概念和解决方案，但是在开发中，我们就需要采用新的技术去实现。

浏览器发送请求到非同源服务器，会导致跨域问题，而服务器与服务器之间的通信是不存在跨域问题的，因此我们在本地 npm run serve 搭建的服务器，先接收到我们的请求，之后由本地服务器转发请求到目标服务器即可获取资源，再将资源从本地服务器发送给浏览器，这是 Webpack 中配置 devServer 解决跨域的思路。
1、在webpack配置文件的devServer里面配置如下信息

2、2. 配置中的主要参数说明

webpack配置proxy反向代理，解决跨域问题

参考技术A webpack官网

此时访问的接口地址在本地被解析为 localhost:8080/api/***

访问的真实地址是 http://192.168.0.111:9999***

在 http://192.168.0.111:9999 上有后端服务的话，你可以这样启用代理：

请求到 /api/users 现在会被代理到请求 http://192.168.0.111:9999/api/users 。

如果你不想始终传递 /api ，则需要重写路径：

默认情况下，不接受运行在 HTTPS 上，且使用了无效证书的后端服务器。如果你想要接受，修改配置如下：

如果你想要代理多个路径特定到同一个 target 下，你可以使用由一个或多个「具有 context 属性的对象」构成的数组：