使用 Nginx 反应路由器刷新 404答案

【问题标题】：React Router refresh 404 with Nginx使用 Nginx 反应路由器刷新 404
【发布时间】：2018-09-20 07:38:26
【问题描述】：

在我开始之前，我想说我确实找到了 this question 和类似的，但解决方案不起作用。

问题：刷新反应页面，或尝试直接访问网址（例如：www.sitecensored.com/portfolio）给我一个 404 错误。

我已将 Nginx 设置为从端口 80 到 3000 (React) 的反向代理。 React 正在使用 pm2 serve 提供服务。

location /api 正在由 node/express 处理

位置 / 正在由 React 处理

当我添加 try_files 时，我从 Nginx 得到 501。我猜是缺少一个步骤，但我对 Nginx 不够熟悉，不知道该步骤是什么。

React 不依赖 Node 或 Express，只依赖 Nginx。目前，它们仅用于处理联系表单的服务器端处理。

NGINX

server {

    listen [::]:80 ipv6only=off;

    server_name www.sitecensored.com sitecensored.com;

    location /api {
            proxy_pass http://127.0.0.1:3001;
    }

    location / {
            root /srv/www.sitecensored.com/client/build;
            proxy_pass http://localhost:3000;
            proxy_http_version 1.1;
            proxy_set_header X-Forwarded-For $remote_addr;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header Host $host;
            proxy_set_header X-NginX-Proxy true;
            proxy_redirect off;
            proxy_set_header Connection "upgrade";
            proxy_set_header X-Client-Verify SUCCESS;
            proxy_redirect off;
            proxy_set_header X-Forwarded-Proto $scheme;
    }
 }

反应

<Router key="router">
    <div>
      {/* top navigation bar including Page title */}
      <Navbar key="navbar" />
      <Switch key="switch">

        <Route key="homeroute" exact path="/" component={Home} />

        <Route key="websiteroute" exact path="/about/website" component={Website} />

        <Route key="portfolioroute" exact path="/portfolio" component={Portfolio} />

        <Route key="faqroute" exact path="/faq" component={FAQ} />

        <Route key="resumeroute" exact path="/resume" component={Resume} />

        <Route key="contactroute" exact path="/contact" component={Contact} />
      </Switch>
    </div>
  </Router>

当然，如果我做错了什么、愚蠢或需要更多信息，请告诉我。

谢谢！

【问题讨论】：

出于兴趣，您能否通过输入 IP 地址和端口号来导航到您的站点。 IE。 216.58.208.174:3000?如果可以，那将是您的域名问题，如果不能，则将其范围缩小到端口转发问题。
不，不能通过IP和端口访问。

标签： reactjs nginx react-router nginx-reverse-proxy

【解决方案1】：

我希望我可以在评论中提出这个问题，但我没有代表这样做。当您说刷新时，您是在以下位置刷新：www.sitecensored.com/about/website 还是 www.sitecensored.com/？另外，您能否尝试在其中添加一个额外的 nginx 块作为测试：

location /portfolio {
        proxy_pass http://localhost:3000;
        proxy_redirect     off;
        proxy_set_header   X-Real-IP $remote_addr;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Host $server_name;
}

告诉我它是否加载了你的 react 应用？这样做将有助于确认我对这个问题的一些怀疑。

【讨论】：

主页刷新没有问题，像 www.sitecensored.com/about/website 这样的位置变成了 404。我添加了额外的位置和同样的东西，404s
感谢投票赞成的人，我现在可以发表评论了！
您是否尝试添加该块并转到 URL？如果是这样，发生了什么？
我添加了额外的位置和相同的东西，404s
我更改了块，因为它有一些我不想要的重复项和根。你能再试一次吗？

【解决方案2】：

你必须在你创建之前在 package.josn 中提到 home 路径来构建你在 package.json 中设置的 home URL：domain.com

错误：Nginx 配置没有错误，您使用了反应历史记录或哈希路由器，将 URL 保留在反应端

<HashRouter history={history}> 
   <Route path='/' component={IndexPage} exact={true} /> 
</HashRouter> ```

【讨论】：