get CORS problem when ty to get a token in keycloak with vuejs and axios

Question

I trying to access one keycloak with axios in my vuejs app, but I receive the cors error, can someone help me please? (If I make a post from POSTMAN to my keycloak works fine)

I using this code:

 const params = new URLSearchParams();
  params.append("grant_type", "password");
  params.append("client_id", "notas-front");
  params.append("username", usuario.value);
  params.append("password", password.value);
  console.log(params);
  const config = {
    //  withCredentials: true,
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
  };
  axios.defaults.headers.common["Access-Control-Allow-Origin"] =
    "http://localhost:8080";
  axios
    .post(
      "http://localhost:8082/auth/realms/lumera/protocol/openid-connect/token",
      params,
      config
    )
    .then((response) => {
      console.log(response);
    });

and get this error:

but when I look the request I can't find the error: the OPTIONS returns 200

but the POST dont

Answer 1

Postman doesn't care about Same Origin Policy, browser do. That's why your request is working in Postman but not in the browser.

Access-Control-Allow-Origin is a response header, you can't set it on the client request. And as you can see from the OPTIONS response headers your server is returning: Access-Control-Allow-Origin: http://localhost:8080

In a development environment the best way to solve this is setting a proxy in your vue configuration. Otherwise you should configure the server to allow requests from localhost:8080

Answer 2

Configure Web Origins properly in the Keycloak notas-front client config.