问题
I recently built a Vue.js application with Okta authentication. I am attempting to deploy this application on Netlify. After setting up a new project in Netlify, I imported the Vue.js application into the Netlify project from GitHub. I reconfigured the router in the application so that redirect_uri
in the Okta initializer reflects the new 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"
});
After deploying the application and clicking the login button, I should be redirected to the default Okta login page. However, I am instead redirected to a page that says "page not found: Looks like you've followed a broken link or entered a URL that doesn't exist on this site."
I even made sure to whitelist that URL in my Okta dashboard. Any idea why Netlify doesn't recognize the new redirect_uri? Thanks!
回答1:
Since you're deploying a SPA, you need to route all routes to your index.html
and let Vue handle them.
According to this article, you need to add a _redirects
file to your publish
directory with the following line to take advantage of browser history pushstate:
/* /index.html 200
For more info, see Netlify's docs.
回答2:
I solved the CORS issue. In the Okta Dashboard, I added the redirecting URL as an original URL under API > Trusted Origins
. I selected Add Origin
to specify the base URL of the website, then selected CORS. See : https://support.okta.com/help/s/article/CORS-error-when-accessing-Okta-APIs-from-front-end
来源:https://stackoverflow.com/questions/59864935/deploy-vue-js-okta-authentication-app-on-netlify