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

Question

我有一个由 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 。 它确实正确。

Answer 1

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

首先，来自用户@Panther 的一个很好的回答是react.js 应用程序显示在 nginx 服务器中找不到 404

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

为避免这种情况，您需要为所有不匹配的路由加载根文件（通常是 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;
}