笔记大全

react脚手架配置代理如何实现

更新时间：2023-11-27

什么是React脚手架配置代理

在开发React应用时，我们有时需要从我们自己的服务器端请求数据，尤其是在开发阶段。但是，在开发过程中，服务器和客户端运行在两个不同的端口上，为了在本地开发中尽可能模拟生产环境，我们需要将前端服务器代理到后端服务器。React脚手架提供了方便的API让我们配置代理。

如何在React脚手架中配置代理

步骤如下：

在create-react-app祖父上，运行npm install http-proxy-middleware --save-dev;
在src中新建一个setupProxy.js文件;
在文件中，编写如下代码：

  const { createProxyMiddleware } = require("http-proxy-middleware");
  module.exports = function(app) {
    app.use(
      "/api",
      createProxyMiddleware({
        target: "http://localhost:3001",
        changeOrigin: true,
        logLevel: "debug"
      })
    );
  };

代码解释

上面的代码通过npm安装了http-proxy-middleware包。这是Node.js的一个中间件来创建http代理。该功能允许我们在开发环境中将API请求代理到后端服务器上。

接下来，我们在src目录下新增了一个setupProxy.js文件。这个文件必须返回一个函数，来接收express实例。这个函数的主要任务是为后端服务器提供代理服务。

以上代码中的createProxyMiddleware是http-proxy-middleware提供的一个工厂函数，可以用于创建代理中间件。在这个函数的参数中，我们配置了target表示需要代理的后端服务器端口。这里我们假设后端服务运行在localhost:3001端口。

同时，我们还为createProxyMiddleware的第二个参数设置了一个changeOrigin选项，其为true表示将发送请求的地址更改为代理的地址。这样，后端服务器也能够接收到正确的来自前端的请求地址。

为了方便调试代理服务的问题，我们还设置了logLevel，表示允许http-proxy-middleware写入调试消息。

如何使用代理

在新增了setupProxy.js文件后，我们只需要在代码中把API请求的地址修改为代理地址就可以开始使用代理服务了。比如，我们之前需要请求的API地址是"http://localhost:3001/api/posts"，现在我们改成了"/api/posts"，实现代码如下：

  axios.get('/api/posts')
    .then(res => {
      console.log(res.data);
    })
    .catch(err => {
      console.log(err);
    })

总结

React脚手架配置代理需要安装http-proxy-middleware包，并在src中新建一个setupProxy.js文件。在这个文件中，我们使用http-proxy-middleware提供的createProxyMiddleware工厂函数来创建代理中间件，并配置了需要代理的后端服务器地址。最后，在代码中使用新的请求地址即可开始使用代理服务。

c语言编程笔录