使用http-proxy-middleware反应应用浏览器代理

时间:2020-08-28 11:35:26

标签: javascript reactjs proxy reverse-proxy http-proxy-middleware

我在React应用程序中遇到代理问题。 目标:我有两个React应用程序,第一个应用程序在localhost:3000上,第二个应用程序在localhost:3001上。我想要的是? =>在第一个应用程序中时,我将单击:

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

然后url将从localhost:3000更改为localhost:3000 / app2,第二个react app显示url localhost:3001中包含的内容。

我导入了http-proxy-middleware库,并在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)

但是后来我收到了一个错误,该错误要求require(...)不是一个函数or表示不是一个函数的oraz,当我将Express放入{}时也会发生错误。

1 个答案:

答案 0 :(得分:0)

我知道已经晚了,但我遇到了同样的问题。保留对我有用的东西,以便其他人可以尝试一下。此代码已针对使用 create-react-app 创建的 React 应用程序进行了测试。

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

setupProxy.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);
      })
  }