在 Netlify 上部署 Vue.js Okta 身份验证应用程序答案

【问题标题】：Deploy Vue.js Okta Authentication app on Netlify在 Netlify 上部署 Vue.js Okta 身份验证应用程序
【发布时间】：2020-01-23 02:39:54
【问题描述】：

我最近使用 Okta 身份验证构建了一个 Vue.js 应用程序。我正在尝试在 Netlify 上部署此应用程序。在 Netlify 中设置新项目后，我将 Vue.js 应用程序从 GitHub 导入到 Netlify 项目中。我在应用程序中重新配置了路由器，以便 Okta 初始化程序中的 redirect_uri 反映新的 Netlify URL：

import Auth from "@okta/okta-vue";

Vue.use(Auth, {
  issuer: "https://xxx-xxxxxx.okta.com/oauth2/default",
  client_id: "xxxxxxxxxxxxxxxxxxxx",
  redirect_uri: "https://xxxxxxxxx-xxxx-xxxxxx.netlify.com/implicit/callback",
  scope: "openid profile email"
});

部署应用程序并单击登录按钮后，我应该被重定向到默认的 Okta 登录页面。然而，我被重定向到一个页面，上面写着“找不到页面：看起来你点击了一个损坏的链接或输入了一个在此站点上不存在的 URL。”

我什至确保在我的 Okta 仪表板中将该 URL 列入白名单。知道为什么 Netlify 无法识别新的 redirect_uri 吗？谢谢！

【问题讨论】：

标签： vue.js github okta netlify okta-api

【解决方案1】：

由于您正在部署 SPA，因此您需要将所有路由路由到您的 index.html 并让 Vue 处理它们。

根据this article，您需要使用以下行将_redirects 文件添加到您的publish 目录以利用浏览器历史推送状态：

/*    /index.html   200

有关详细信息，请参阅Netlify's docs。

【讨论】：

嗨，马特，谢谢。该解决方案可以重定向到“xxxxxxxxx-xxxx-xxxxxx.netlify.com/implicit/callback”。但是，我现在在控制台中收到一条错误消息，指出重定向的 URL is blocked by CORS policy。我了解此政策的含义，但不确定为什么会被阻止。我在 Okta 仪表板中将此 URL 列入了白名单。我是否需要在我的应用程序中的某处添加某种“Access-Control-Allow-Origin”标头来覆盖该块？
我刚才尝试在项目根目录中添加一个_headers 文件，带有/* Access-Control-Allow-Origin: * 行，但这仍然不起作用。不过，我走在正确的轨道上吗？
您介意看看另一个 Vue.js/Okta 问题吗？ stackoverflow.com/questions/60582551/…

【解决方案2】：

我解决了 CORS 问题。在 Okta 仪表板中，我将重定向 URL 添加为 API > Trusted Origins 下的原始 URL。我选择了Add Origin 来指定网站的基本 URL，然后选择了 CORS。见：https://support.okta.com/help/s/article/CORS-error-when-accessing-Okta-APIs-from-front-end

【讨论】：