[Vuejs]-Basic Auth request to a Kong api gateway endpoint gets CORS error and Preflight not found

by

0👍

✅

The problem here is that CORS mechanism before each request, makes an preflight request using http OPTIONS method.

According to mozilla website:

CORS also relies on a mechanism by which browsers make a "preflight" request to the server hosting the cross-origin resource, in order to check that the server will permit the actual request. In that preflight, the browser sends headers that indicate the HTTP method and headers that will be used in the actual request.

[SOLUTION]

Then, to fix this problem we need to expose for each route the http OPTIONS method. Then, in the API gateway configuration file (kong.ymal) for each route I created a copy of the route (named route_name_preflight) with http OPTIONS method and without plugins and authentications as you can see bellow (kong.yaml):

added preflight route for each route

It is important to reinforce that as I said above, my backend microservices controller classes have @CrossOrigin annotation, that probably exposes the preflight request for each controller request, this being necessary.

In the frontend app (vuejs) I started using axios() instead of axios.method(), because is better for add headers (f.e. Authorization with jwt tokens) and other stuff:

const options = {
    url: process.env.VUE_APP_BACKEND_URL + '/api/client/authenticate',
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json;charset=UTF-8',
        'Authorization': 'Basic ' + window.btoa(this.username + ':' + this.password),
    }
};
await axios(options).then(...)

Leave a comment