Hello, what I’m trying is to call an API from an Quasar SPA from a local Server (in a different project folder).
I followed (as close as possible) this doc: Auth0 Vue SDK Quickstarts: Calling an API
The Server is the exact same as in the docs. I tried to redo it a couple of times but I still get the same Error:
Access to XMLHttpRequest at 'http://localhost:3001/api/external' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Because Quasar doesn’t offer a main.js, I had to put this into a boot file:
// Import the Auth0 configuration
import { domain, clientId, audience } from "../../auth_config.json";
// Import the plugin here
import { Auth0Plugin } from "../auth";
// "async" is optional;
// more info on params: https://quasar.dev/quasar-cli/boot-files
export default async ({ Vue, router } /* { app, router, Vue ... } */) => {
Vue.use(Auth0Plugin, {
domain,
clientId,
audience,
onRedirectCallback: appState => {
router.push(
appState && appState.targetUrl
? appState.targetUrl
: window.location.pathname
);
}
});
};
And the callApi function is the same as from the docs. Because my SPA and server are in different project folders, I skipped the devServer.proxy-part.
When I call the API with a curl (including the Token I get from getTokenSilently) it works. It just doesn’t work from my SPA. WHY?
(Login works properly).
Full Errors:
Access to XMLHttpRequest at 'http://localhost:3001/api/external' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
vue.runtime.esm.js?5593:619 [Vue warn]: Error in v-on handler (Promise/async): "Error: Network Error"
found in
---> <PageHome> at src/pages/Home.vue
<QPageContainer>
<QLayout>
<MainLayout> at src/layouts/MainLayout.vue
<App> at src/App.vue
<Root>
vue.runtime.esm.js?5593:1897 Error: Network Error
at createError (createError.js?688b:16)
at XMLHttpRequest.handleError (xhr.js?e38e:84)
xhr.js?e38e:177 GET http://localhost:3001/api/external net::ERR_FAILED