Call an API using Quasar (Vue 2): Access blocked by CORS policy

Help
, , ,
1

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