我在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放入{}时也会发生错误。
答案 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);
})
}