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             }         }     } }