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

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

CodePudding user response：

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

CodePudding user response：

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