React - ajax 配置代理

来一碗刘肉面2025-02-23 15:13

React 本身只关注于界面，并不包含发送 ajax 请求的代码；
前端应用需要通过 ajax 请求与后台进行交互（json 数据）；
React 应用中需要集成第三方 ajax 库（或者自己封装）。

方法一

在 package.json 中追加如下配置：

javascript 复制代码

"proxy":"http://localhost:5000" // 5000端口号

说明：

优点：配置简单，前端请求资源时可以不加任何前缀；
缺点：不能配置多个代理；
工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000（优先匹配前端资源，就近原则）。

方法二

第一步：创建代理配置文件

在src下创建配置文件：src/setupProxy.js

第二步：编写 setupProxy.js 配置具体代理规则

javascript 复制代码

const proxy = require('http-proxy-middleware')

module.exports = function (app) {
    app.use(
        proxy('/api', { // 遇见 /api 前缀的请求，就会触发该代理配置
            // 请求转发给谁
            target: 'http://localhost:5000',
            changeOrigin: true, // 控制服务器收到的请求头中的Host的值
            pathRewrite:{'^/api':''} // 重写请求路径（必须） 将/api换成''
        }),
        proxy('/api1', {
            target: 'http://localhost:5001',
            changeOrigin: true,
            pathRewrite:{'^/api1':''}
        }),
    )
}

说明：

优点：可以配置多个代理，可以灵活的控制请求是否走代理。
缺点：配置繁琐，前端请求资源时必须加前缀。