详解webpack-dev-server使用http-proxy解决跨域问题

webpack-dev-server代理配置详解

文档资料

参考webpack官方文档中关于webpack-dev-server开启proxy功能的介绍。

查阅Vue-cli中proxyTable解决开发环境跨域问题的相关文档，该方案同样适用于webpack-dev-server的配置。

了解http-proxy-middleware库，webpack-dev-server的代理功能实际上是对该库的封装实现。

配置http-proxy

在webpack配置文件（webpack.config.js）中设置相关参数。

module.exports = {
 ...此处省略一万字

 // webpack-dev-server的配置
 devServer: {
 historyApiFallback: true,
 hot: true,
 inline: true,
 progress: true,
 port: 3000,
 host: '10.0.0.9',
 proxy: {
 '/test/*': {
 target: 'http://localhost',
 changeOrigin: true,
 secure: false
 }
 }
 },

 ...此处省略一万字
};

上述配置文件中，涉及http-proxy的核心内容位于 proxy 配置项内部。

接口调用示例

调用接口

为便于演示，此处使用jQuery封装的ajax函数进行示例展示。

$.ajax({
 // url: 'http://10.0.0.9:3000/test/testFetch/Login.php', // 这样不行
 url: '/test/testFetch/Login.php', // 这样行
 type: 'post',
 data: {
 app_id: '13751313169',
 password: '123456',
 user_name: 'Nicholas'
 },
 success: function(data) {
 console.log(data);
 }
});

关键参数说明

proxy中部分参数说明

涉及 '/test/*' 以及 target: 'http://localhost' 的配置。

从参数命名可以看出，此配置旨在将匹配 '/test/*' 格式的API域名重定向至 'http://localhost'。

1. 结合前文“调用接口”部分可知，请求 url: '/test/testFetch/Login.php' 时，系统会自动补充前缀，即该请求等价于 url: 'http://10.0.0.9:3000/test/testFetch/Login.php'。
2. 然而，在使用http-proxy进行重定向后，url: '/test/testFetch/Login.php' 实际上等价于 url: 'http://localhost/test/testFetch/Login.php'。

关于changeOrigin参数

1. 该参数为 true/false 类型，默认为 false，用于将请求Host头部的origin更改为目标URL。
2. 本地会虚拟一个服务端接收你的请求并代你发送该请求——这个是别人的说法
3. 经测试，即使将此参数设置为 false，部分情况下也能成功，具体原因尚不明确，因此建议将其设置为 true 以确保兼容性。

关于secure参数

1. 该参数为 true/false 类型，若需验证SSL证书，则设为 true。

关于pathRewrite参数

1. 示例： pathRewrite: {'^/api': ''}。
2. Object-keys 将用作正则表达式来匹配路径。
3. 推测此处是将 '^/api' 替换为空字符串（仅个人推测，未测试成功，可能是正则表达式编写有误）。

Fetch API实现

附上使用Fetch API的代码

上述代码与“调用接口”中使用 $.ajax() 实现的效果是一样的

let testAsync = async function () {
 var feeling = {
 app_id: '13751313169',
 password: '123456',
 user_name: 'Nicholas'
 };

 var fetchParams = {
 method: 'post',
 headers: {
 'Accept': 'application/json',
 'Content-Type': 'application/json'
 },
 credentials: 'include', // 将凭证也带上（例如cookies）
 body: JSON.stringify(feeling),
 };

 let temp = await fetch('/test/testFetch/Login.php', fetchParams).then(response => response.text());

 console.log(temp); // 这个就是一个json对象

 return temp;
};

let data = testAsync(); // async函数返回值是一个Promise对象

console.log(data); // 这个是一个Promise对象

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。