我的React应用未使用http-proxy-middleware注册setupProxy.js

问题描述

我正在尝试使用setupProxy.js代理多个API，但完全无法正常工作。我现在可以在开发人员中代理请求的唯一方法是在package.json中设置proxy字符串，但这不能解决我的问题，因为我需要代理多个端点，并且只能使用一个字符串。

我正在使用"http-proxy-middleware": "^0.19.1"

我的setupProxy.js看起来像这样：

var express = require('express');
var app = express();
var proxy = require('http-proxy-middleware');
var cors = require('cors')

module.exports = function() {
    app.use(cors());

    app.use(proxy('/api',{ target: 'http://localhost:52992/' }));
    app.use(proxy('/otherapi',{ target: 'https://localhost:44309/' }));
  
    app.get('/einreichung',function(req,res){
        res.sendfile(__dirname + '/build/index.html');
    });
    
    app.use(express.static(__dirname + '/build'));
    
    
    app.listen(3000,function () {
        console.log('Example app listening on port 3000!');
    });
  }

我尝试了不同的修改。没有module.exports，在function(app)中有app参数，没有express和app variables，但没有任何作用。

解决方法

您必须从createProxyMiddleware正确导入http-proxy-middleware：

var express = require('express');
var app = express();
var { createProxyMiddleware } = require('http-proxy-middleware');
var cors = require('cors');

https://create-react-app.dev/docs/proxying-api-requests-in-development

尝试使用传递给匿名函数的第一个 arg 作为 app

module.exports = function(app) {
    // your code...
}

http-proxy-middleware reactjs reactjs reactjs reactjs