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

Question

我最近使用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吗？谢谢！

Answer 1

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

[根据this article，您需要使用以下几行将_redirects文件添加到publish目录中，以利用浏览器历史记录pushstate：

/*    /index.html   200

有关更多信息，请参见Netlify's docs。

Answer 2

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