在前端开发中，我们往往需要调用其他的后端 API。然而，由于前后端的代码是相对独立的，我们往往需要在本地搭建一个开发环境，使用 webpack-dev-server 来进行开发。在这时，我们需要使用 webpack-dev-server 的 proxy 配置功能来解决跨域问题。
本文将详细讲解 webpack-dev-server 的 proxy 功能以及其配置方法，并提供一些示例代码供大家参考。
什么是 webpack-dev-server 的 proxy？
当我们在前端中调用后端 API 时，往往会遇到跨域问题。这是由于浏览器的同源策略所导致的。为了解决这个问题，我们可以使用 webpack-dev-server 的 proxy 功能，将后端 API 的请求转发到一个代理服务器，然后再将返回的数据发送给前端。因此，我们可以在本地开发中愉快地调用后端 API，而无需关心跨域问题的存在。
如何配置 webpack-dev-server 的 proxy？
proxy 的配置非常简单。我们只需要在 webpack 的配置文件（一般为 webpack.config.js 文件）中找到 devServer.proxy 属性，然后按照下面的格式进行配置即可：
-- -------------------- ---- -------
---------- -
------ -
------- -
------- ------------------------
------------ - -------- -- --
------------- -----
------- -----
-
-
-上面的代码中，我们将所有以 /api 开头的请求，转发到本地的 3000 端口。同时，我们将 /api 从路径中去掉，然后加上 changeOrigin 以及 secure 参数。
- changeOrigin 参数用于指示 webpack-dev-server 是否将修改请求的主机头（hostname）。设置为 true 时，webpack-dev-server 将把主机头设置为目标 URL。
- pathRewrite 用于将路径中某个部分替换掉，这里将 /api 替换成了空字符串。
- secure 设置为 false 可以禁用 SSL 证书的验证。
在上述示例代码中，我们只配置了一个接口（/api）。如果我们需要配置更多的接口，只需再添加一个对象即可。如：
-- -------------------- ---- -------
------ -
------- -
------- ------------------------
------------ - -------- -- --
------------- -----
------- -----
--
-------- -
------- -------------------------
------------- -----
------- -----
-
-这里我们指示 webpack-dev-server 将 /api 和 /user 两个 URL 转发到本地 3000 和 8080 端口。
实战示例
下面是一个实战示例，我们将演示如何使用 webpack-dev-server 的 proxy 功能实现前后端调用。
首先，我们需要搭建一个简单的后端服务，代码如下：
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- -- - --------------
----- ---- - ----------------
-------------------------- --------- --------- -
-------------------- -------- ---- -- -------------
-- ------------ --- ------------ -
----------------------- - --------------- ------------ ---
------------------------------- ----- -------------- ----
---------------
- ---- -
----- -------- - --- - ------------
----- ------- - ---------------------------------------------
----- --------- - -
-------- ------------
------ ------------------
------- -----------
-------- -------------------
------- ------------
------- ------------
------- ------------
------- ------------
------- ------------
-------- ------------------------
------- -----------------------
------- --------------------------------
------- -----------------------
------- ---------------------------
--
----- ----------- - ------------------ -- ---------------------------
--------------------- -------- ------- -------- -
-- ------- -
-- ----------- -- --------- -
------------------------
----------------- --- --------
- ---- -
------------------------
-------------------- ----- ---- --- ---- ----- --- ------ - - ---------- - - -------
-
- ---- -
----------------------- - --------------- ----------- ---
--------------------- ---------
-
---
-
----------------
------------------- ------- -- -------------------------上面的代码中，我们创建了一个简单的 HTTP 服务器，然后监听 3000 端口。当我们请求 /api/data 时，我们返回一段 json 数据，其他请求我们则返回相应的静态文件。
然后我们需要创建一个前端项目，使用 webpack-dev-server 来进行本地开发，并调用后端 API。代码如下：
// frontend/index.js
const axios = require('axios');
axios.get('/api/data').then(response => {
console.log(response.data);
});
document.write('<h1>Hello World!</h1>');上述代码中，我们使用 axios 库来调用后端的 API。同时，我们在页面中输出一句简单的文字，用于验证我们的前端项目成功运行。
最后，我们需要在 webpack 的配置文件中添加 devServer.proxy 配置。代码如下：
-- -------------------- ---- -------
-- -----------------
-------------- - -
----- --------------
---------- -
----- -----
------ -
------- -
------- ------------------------
------------ - -------- -- --
------------- -----
------- -----
-
-
--
------ ----------------------
------- -
----- ----------------------- --------
--
------- -
------ -
-
----- ---------
---- ---------------- --------------
--
--
--
--在上述代码中，我们指示 webpack-dev-server 将所有以 /api 开头的 URL 转发到本地的 3000 端口。然后我们在入口文件中调用后端 API，输出相应的数据。同时，我们使用 style-loader 和 css-loader 来处理 CSS 文件。
接下来，我们可以在终端中运行以下命令来启动前端项目：
npx webpack-dev-server
然后通过浏览器访问 http://localhost:8080 即可查看到我们的页面。同时，我们在浏览器的控制台中，可以看到我们成功调用后端 API，并输出了其返回的数据。
总结
通过本文的分析，我们学会了如何使用 webpack-dev-server 的 proxy 功能，来解决前后端调用时可能遇到的跨域问题。同时，我们也展示了一个简单的前端项目，用于演示如何调用后端 API。在实践应用中，我们需要灵活配置 proxy，以适应不同的开发需求。希望本文能对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d193d9b5eee0b5258ce575