React如何通过代理进行本地调测

前言

由于在react进行本地调测时，访问后端接口会遇见跨域问题，所以我们需要通过代理的方式来解决跨域问题（服务端之间通信不存在跨域问题）

本记录使用的"react": “^18.2.0”

一、显示隐藏的webpack配置文件

注：react是把webpack隐藏的，本地调测依赖于webpack的代理策略，所以首先需要把webpack的配置文件显示（此过程是不可逆的）

npm run eject

二、增加代理配置

注：以下2个方式只能选一种，否则会导致多次代理，接口报404

方法1、修改webpackDevServer.config.js文件中的proxy

【1】搜索到‘proxy’字段

【2】修改proxy类似如下配置：

	proxy: {
      '/api': {
        target: 'http://localhost:8081',
        ws: true,
        changeOrigin: true,
        // pathRewrite: {'^/api': ''}
      }
    }

方法2 、在新增的setupProxy.js文件增加proxy

【1】在项目的src文件目录下创建名为setupProxy.js的文件（必须是这个名字，webpack只认他）
【2】在文件中增加以下proxy配置

const proxy = require('http-proxy-middleware');
module.exports = function(app) {
    app.use(
        proxy('/api', {
            target: "http://localhost:8081",
            changeOrigin: true,
            // pathRewrite: {'^/api': ""}
        }),
    )
}

三、npm run start 启动本地环境编译

以api开头的API接口可以访问服务端成功，如下图：