使用http代理中间件响应应用程序浏览器代理

Question

我有代理反应应用程序的问题。目标：我有两个反应应用，第一个应用在localhost:3000，第二个在localhost:3001。我想要什么？=

<a href="/app2">
<button>Second App Open</button>
</a>

然后url将从localhost:3000更改为localhost:3000/app2，第二个react应用程序将显示url localhost:3001中包含的内容。

我导入了http代理中间件库，并创建了src方向文件setupProxy。js和内部：

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

module.exports = function(app) {
    app.use(
        createProxyMiddleware('/app2',{
            target: 'http://localhost:3001',
            changeOrigin: true,
            prependPath: false,
            secure: false,
            logLevel: 'debug',
            ws:true
        })
    );
app.listen(3000)
};

有人能帮我吗？

我还在setupProxy中尝试了这段代码。js:

const express = require('express')
const {createProxyMiddleware} = require("http-proxy-middleware");
app = express()
    app.use(
        createProxyMiddleware('/app2',{
            target: 'http://localhost:3001',
            changeOrigin: true,
            prependPath: false,
            secure: false,
            logLevel: 'debug',
            ws:true
        })
    );
app.listen(3000)

但是我收到了需要（...）不是函数的错误，或者表达式不是函数的错误，当我把表达式输入{}时，也会发生错误。

Answer 1

我知道很晚了，我也遇到了同样的问题。保留对我有用的东西，这样其他人就可以尝试一下。此代码针对使用create-react-app创建的反应应用进行测试。

我代理了这个endpoint-https://services.odata.org/V2/Northwind/Northwind.svc/Customers?$format=json

设置代理。js

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = (app) => {
    app.use(createProxyMiddleware('/api2', {
        target: 'https://services.odata.org/V2/Northwind/Northwind.svc/',
        changeOrigin: true,
        pathRewrite: { '^/api2': '' }
    })
    );
}

你的js文件

triggerCORSCall() {
    axios.get(`/api2/Customers?$format=json`)
      .then(response => {
        alert('Success');
      }).catch(error => {
        alert('Failure');
        console.log(error);
      })
  }