react配置代理的3中方法

1.使用create-react-app的代理配置

   可以在项目根目录下的package.json文件中添加proxy字段来配置代理：

{
   ...

  "proxy": "http://localhost:5000"
}
//注意：比如当前端口是3000，先在当前端口3000中找对应路径内容，找不到就去5000中

2.使用http-proxy-middleware库

  create-react-app中内置http-proxy-middleware，只需要在src目录下新建setupProxy.js

//setupProxy.js
const proxy = require('http-proxy-middleware') //这里用require()引入，是因为这里用commonjs规范
module.exports = function (app) {
    app.use(proxy('/api', {
        target: 'http://localhost:5000',
        changeOrigin: true,
        pathRewrite: {
            '^/api': ''
        }
    }))
}

3.craco 扩展webpack配置

  安装

npm i -D @craco/craco

   package.json里面做如下改动：

"scripts": {
-  "start": "react-scripts start"
+  "start": "craco start"
-  "build": "react-scripts build"
+  "build": "craco build"
-  "test": "react-scripts test"
+  "test": "craco test"
}

根目录建文件craco.config.js

module.exports={
    //...
    // ...
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:5000',
                changeOrigin: true
            }
        }
    }
}