English
资源说明：Webpack devServer 的 `proxy` 选项是一个非常实用的功能，它允许开发者在开发环境中轻松地解决跨域问题。在实际开发中，我们经常会遇到由于浏览器同源策略限制导致的跨域问题，这使得前端应用无法直接访问不同源的后端API。`proxy` 通过将前端的API请求转发到指定的服务器，从而绕过这些限制。
让我们来看看如何在 `webpack.config.js` 文件中配置 `devServer` 以启用 `proxy`。在以下示例中，我们设置了 `proxy` 配置项，将所有以 `/test/*` 开头的请求转发到 `http://localhost`：
```javascript
module.exports = {
// ...
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
}
},
// ...
},
// ...
};
```
这里有几个关键参数：
1. **`/test/*`**：这是一个路径匹配规则，表示所有以 `/test/` 开头的请求都将被代理。
2. **`target`**：定义了代理的目标服务器地址，这里是 `http://localhost`。
3. **`changeOrigin`**：如果设置为 `true`，会改变 `Host` 头部的来源，使其看起来像是直接请求目标服务器，这对于处理某些服务器的认证机制很有帮助。
4. **`secure`**：默认情况下，如果目标服务器使用HTTPS，`secure` 必须设为 `true`。如果目标服务器使用HTTP，或者你希望在HTTPS下忽略证书验证，可以将其设为 `false`。
当我们在前端代码中发起请求时，比如使用 `jQuery` 的 `$.ajax()` 或现代的 `fetch` API，我们只需提供相对路径，例如 `/test/testFetch/Login.php`。Webpack devServer 会自动将这个路径加上当前服务器的基路径，然后利用 `proxy` 设置将请求转发到目标服务器。
```javascript
// jQuery 示例
$.ajax({
url: '/test/testFetch/Login.php',
type: 'post',
data: {
app_id: '13751313169',
password: '123456',
user_name: 'Nicholas'
},
success: function(data) {
console.log(data);
}
});
// Fetch 示例
async function testAsync() {
const feeling = {
app_id: '13751313169',
password: '123456',
user_name: 'Nicholas'
};
const response = await fetch('/test/testFetch/Login.php', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(feeling)
});
const data = await response.json();
console.log(data);
}
```
`pathRewrite` 参数允许我们在代理请求时修改路径。例如，如果设置 `pathRewrite: {'^/api': ''}`，那么 `/api/some-resource` 将会被重写为 `some-resource`，并转发到目标服务器。然而，正确配置 `pathRewrite` 需要对正则表达式有良好的理解。
Webpack devServer 的 `proxy` 是一个强大的工具，可以帮助开发者在开发阶段轻松处理跨域问题，无需后端配合设置CORS（跨源资源共享）。只需简单配置，即可实现前端与任何服务器之间的通信，极大地提高了开发效率。
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
