动态导航到 Express 服务器的 React App 链接

Posted 2023-02-16

【中文标题】动态导航到 Express 服务器的 React App 链接

【英文标题】：Navigate a React App link to Express server dynamically

【发布时间】：2018-03-19 01:22:02

【问题描述】：

我正在尝试将 React JS 应用程序上的前端链接导航到 Express 服务器。

示例

<a href="/pages">Pages</a>

在Express服务器中，我写了这段代码

app.get('/pages', (req, res) => 
    res.send('Pages');
);

我还更新了我的前端 package.json 文件，如下所示：

"proxy": 
   "/pages" : 
      "target" : "http://localhost:5000"
   

我的 React 应用程序在端口 3000 上运行，而 Express 服务器在端口 5000 上运行。但是，当我单击链接 Pages 时，没有任何反应。我必须像这样显式更改前端链接才能使其正常工作：

<a href="http://localhost:5000/pages">Pages</a>

有什么方法可以让我的 React App 与我的 Express 服务器动态连接，而不必每次都在所有链接中指定 http://localhost:5000？

【问题讨论】：

让 express 服务器在同一个端口上服务前端

【参考方案1】：

解决了！ 由于热重载，我的 package.json 没有更新。我不得不杀死现有的 webpack 服务器并再次运行它以使其工作。 将来，如果有人遇到这种情况，只需确保像这样更新 package.json 文件：

"proxy": 
   "/pathname" : 
       "target" : "http://yourserveraddress"
   
 

【讨论】：

这似乎不再起作用，因为"proxy" 只接受一个字符串，而不是一个对象。

【参考方案2】：

我觉得应该是的

"proxy": 
  "/pages" : 
    "target" : "http://localhost",
    "port" : 5000
  

【讨论】：

它给出了这个错误：代理错误：无法将请求/页面从 localhost:3000 代理到 localhost (ECONNREFUSED)。

我以为你解决了你的问题？否则尝试设置 changeOrigin: true 以允许 cors。

是的，解决了。我刚刚提到这个答案给了我我提到的回应。