在 Nginx 中使用查询参数启用 React/Express Route答案

【问题标题】：Enabling React/Express Route with Query Parameters in Nginx在 Nginx 中使用查询参数启用 React/Express Route
【发布时间】：2021-12-05 23:45:09
【问题描述】：

在链接缩短网站上工作。站点在我的 localhost 生产环境中按预期工作，但在我部署的 Digital Ocean Ubuntu Linux 服务器上启用 Nginx 后，我似乎无法获得带有查询参数的 Express GET 路由。

Node.js/Express GET 路由：

  router.get("/:code", async (req, res) => {
  try {
    const url = await Url.findOne({ urlCode: req.params.code });
    if (url) {
      return res.redirect(url.longUrl);
    } else {
      return res.status(404).json("no url found");
    }
  } catch (error) {
    console.error(error);
    res.status(500).json("server error");
  }
});

Nginx 配置文件（etc/nginx/sites-available/default）：

server {
        listen 80 default_server;
        listen [::]:80 default_server;
        root /var/www/html;

       
        server_name myname.com www.myname.com;

        location / {

                proxy_pass http://localhost:3000/;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_set_header X-Forwarded-For $remote_addr;
                proxy_cache_bypass $http_upgrade;
        }

如果我将 localhost 端口更改为我的 Express 服务器 (7777)，则 GET 路由将使用 URL 查询参数（即：http://example.com/random8chars），但不会加载 React 前端。

按照当前配置（端口 3000/React 服务器），到“/:code”的 Postman GET 路由返回所需的结果，但是当我在 Chrome 的 URL 栏中输入转换后的链接时，它会返回默认的启动页面。事实上，当我在 Chrome 中输入除我的站点名称之外的任何扩展名时，它总是显示默认启动页面。我知道这是 Nginx 的一个问题，但我似乎无法让它工作。

整天都在努力，但无济于事。发现多个 Stack Overflow 线程涉及该主题，但没有任何效果。我尝试向 Nginx 配置文件添加第二个位置路由，但无济于事。我尝试过的一个例子：

 location /:code {
         proxy_pass http://localhost:7777/:code;
       }

请帮忙！我被困住了，感觉我离这个工作很近了。我将非常感谢任何有关解决此问题的见解。谢谢。

【问题讨论】：

标签： node.js reactjs express nginx routes

【解决方案1】：

我只是添加评论，但我还没有代表。所以在我看来，Nginx 正在尝试提供另一个不存在的文件。尝试添加：

location / {
        try_files $uri /index.html;
   }

这将使 nginx 总是尝试在 rigth 文件中忽略路径。

【讨论】：

感谢您的回复，但很遗憾没有奏效。还有其他想法吗？

【解决方案2】：

所以我终于解决了这个问题！我最初是从错误的角度处理这个问题。看，在我的开发环境中，我在我的反应服务器上设置了一个代理，以将任何未知请求反弹到我的快速服务器。问题是，package.json 中设置的代理在生产环境中不起作用，这就是为什么我的链接缩短应用程序在开发中工作但在生产中没有复制的原因。

我就是这样解决的：

我将 nginx 设置为指向我的 express 服务器@端口 7777。我使用 npm build 命令将我的 react 应用程序导出到 build 文件夹，然后我设置我的 express 服务器来为 build 文件夹提供服务。而已。当您访问网站的默认 URL 时，它会加载 react 构建文件夹，然后当我输入一个缩短的链接 (GET /:code) 时，它就像一个魅力。谢谢！

【讨论】：