react项目配置proxy

在package.json文件中使用proxy配置

create-react-app脚手架低于2.0版本时候：

"proxy":{
   "/api/**":{
      "target":"http://m.kugo.com",
      "changeOrigin": true
    }
}

create-react-app脚手架2.0版本以上只能配置string类型：

"proxy": "http://m.kugo.com",

 

（推荐）使用http-proxy-middleware

1.安装http-proxy-middleware

yarn add http-proxy-middleware

或

npm i -S http-proxy-middleware

2.在src目下新建文件setupProxy.js，并进行如下配置

const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
	app.use(
		"/api",
		createProxyMiddleware({
			target: "http://127.0.0.1:3000",
			changeOrigin: true,
			pathRewrite: {
				"/api": "",
			},
		})
    );
    // 更多代理配置...
};

ps：

这里很多博主说使用如下配置：

app.use(proxy('/api', { 
    target: 'http://127.0.0.1:3000',
    secure: false,
    changeOrigin: true,
    pathRewrite: {
     "^/api": "/"
    },
   }));

我一开始也是这样配置，最近发现报错了proxy is not a function，后发现是http-proxy-middleware版本影响

0.x.x版本的引用方式

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

1.0.0版本的引用方式

const { createProxyMiddleware } = require('http-proxy-middleware');