使用 Nginx 正确处理 Angular Auth0 回调

Question

我是 Nginx 的新用户，也是服务器配置的新手。我有一个应用程序在我的本地机器上运行，它有一个 Flask 后端和 Angular 前端，Auth0 所在的位置，但现在试图启动它并在 Ubuntu 服务器上运行。我使用 Nginx 在我的服务器上显示了 Angular 前端，但是在尝试登录 /callback 路由后失败并显示 404。我看过许多类似的问题和教程，但是 none很清楚或者只是提到了一个解决方案，但是没有像下一个那样显示示例或代码link，或者只是说使用 HashLocationStrategy，我不明白。

How to setup Nginx with Auth0?

我在 app-routing.module.ts 中有一个 CallbackComponent 和一个指向它的 /callback 路由。我在 Auth0 应用程序配置中允许的回调路由定义为：

http://my-ip-address/callback, http://localhost:4200/callback

我的 app.module.ts 文件中有这样的 Auth0 配置：

constructor() {
Auth0.configure({
  domain: 'domain-name',
  audience: 'audience-name',
  clientID: 'client-id',
  redirectUri: 'http://localhost:4200/callback',
  scope: 'scope'
  });
}

我也尝试将 redirectUri 更改为 http://my-ip-address/callback，但没有任何改变。我的 config.d 文件如下所示：

upstream gateway {
    server 127.0.0.1:5000;
}
server {
        listen       80;
        root   /var/www/html;

        location / {
                index  index.html index.htm;
                try_files $uri $uri/ /index.html =404;
        }
    location /api {
        proxy_set_header   Host             $http_host;
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header   X-NginX-Proxy    true;
        proxy_pass http://gateway;          
    }
}

网关是我的后端。其中大部分是从教程中复制的，甚至可能不正确。我知道 Nginx 不知道 Angular 路由内部发生了什么，但我不知道如何连接它才能正常工作。

如何在 Nginx 中处理 Auth0 和 Angular 的 /callback 路由？

Answer 1

事实证明它几乎成功了。我的 conf.d 文件，正是这部分：

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

是正确的。但是在 /sites-enabled 目录中，默认配置文件有这样的错误 index.html=404 所以它正在循环搜索一个名为 'index.html=404' 的页面，这也给出了 505 个错误。此外，redirectUri 必须在 Auth0 仪表板配置和调用 "Auth0.configure" 函数的任何地方都是“http://my-ip-address/callback”。

使用 Nginx 正确处理 Angular Auth0 回调

Handle Angular Auth0 callback correctly with Nginx

nginx

flask

auth0

angular