创建使用 nginx 和 oauth 服务的反应应用程序给我刷新页面问题答案

【问题标题】：Create react app served with nginx and oauth gives me refresh page issue创建使用 nginx 和 oauth 服务的反应应用程序给我刷新页面问题
【发布时间】：2021-02-17 16:59:36
【问题描述】：

我有一个通过 https 在服务器上处理的应用程序，它使用带有令牌的 Oauth2。

在反应中我有 PathRouter 重定向到不同的页面

        <Switch>
            {/*the default is devices*/}
            <Route exact path="/">
                <Redirect to="/devices"/>
            </Route>

我有一个 nginx 配置

server {
    listen 443 http2 ssl;
    listen [::]:443 http2 ssl;
    root /home/path-to-static;
    index index.html;
    
    server_name *****.com;
    error_log /var/log/nginx/debug.log debug;
    ssl_certificate /etc/nginx/certs/*****.crt;
    ssl_certificate_key /etc/nginx/certs/*****.key;

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    ssl_ciphers 'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH';

    location / {
      try_files $uri $uri/ @backend;
      }
                          
    location @backend {
      proxy_pass http://localhost:8080;
     }
}

而且它有效！

当我想刷新页面时，麻烦就开始了。在本地（在本地主机上）它工作得很好，但是当我在服务器上刷新页面时它不会让我告诉我我未经授权。我有一个登录屏幕，我在其中输入我的凭据并接收令牌以及我使用这些令牌向服务器发出的每个请求，但我的路由（我假设）是导致错误的基石 - 内部路由在没有令牌的情况下发生。

再一次：它工作正常，直到我刷新页面。在本地它总是可以正常工作。

这是服务器上提供的错误

PS 也许这很重要：当我通过登录页面登录然后我继续访问设备时，没有设备请求 - 就像我通过 F5 刷新页面时一样。

PS 2 当我在应用程序的某个选项卡上时，我发现了一个配置，我清除了除 root 之外的所有 uri，然后按 Enter 键，它引导我到 https://myapp.com/devices！它确实正确。

【问题讨论】：

标签： reactjs nginx oauth react-router react-create-app

【解决方案1】：

好的，在阅读了关于 SO 的大量答案后，我终于让它工作了。

首先，用户@Panther 在这里react.js application showing 404 not found in nginx server 给出了很好的回答

当你的 react.js 应用加载时，路由在前端处理由反应路由器。比如说你在http://a.com。然后上您导航到http://a.com/b 的页面。处理此路线更改在浏览器本身。现在，当您刷新或打开网址时 http://a.com/b 在新选项卡中，请求转到您的 nginx，其中特定路线不存在，因此您得到 404。

为避免这种情况，您需要加载根文件（通常是 index.html）所有不匹配的路由，以便 nginx 发送文件并且路由是然后由浏览器上的 react 应用处理。

所以，正如他建议的那样，我已经更改了我的配置

location / {
  try_files $uri $uri/ /index.html @backend;
  }
                      
location @backend {
  proxy_pass http://localhost:8080;
 }

但这给了我一些奇怪的错误。

所以我必须为我拥有的每条路径写下位置，如下所示：

location / {
  try_files $uri $uri/ @backend;
  }
  
location /devices {        // here my path is similar as in react 
                           // router 
  try_files $uri $uri/ /index.html;
}

【讨论】：