React配置代理

React配置代理异常

在使用create-react-app创建项目后，本地项目联调Server端项目，涉及到跨域问题；一般采用配置proxy方式；

1. 参考官方文档 - 在开发环境中代理 API 请求
2. 新建src/setupProxy.js ，并安装 npm install http-proxy-middleware, 配置如下

const proxy = require("http-proxy-middleware");
 
module.exports = function(app) {
  app.use(proxy('/api', { target: 'http://targetHost:targetPort/'api }));
};

3. 启动台报错 proxy is not a function，由于http-proxy-middleware版本变动导致；

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

module.exports = function(app) {
  app.use(createProxyMiddleware('/api', { target: 'http://targetHost:targetPort/'api }));
};

参考

https://www.html.cn/create-react-app/docs/proxying-api-requests-in-development/

https://www.npmjs.com/package/http-proxy-middleware