使用 vuejs 和 axios 在 keycloak 中获取令牌时遇到 CORS 问题答案

【问题标题】：get CORS problem when ty to get a token in keycloak with vuejs and axios使用 vuejs 和 axios 在 keycloak 中获取令牌时遇到 CORS 问题
【发布时间】：2022-01-27 02:24:21
【问题描述】：

我试图在我的 vuejs 应用程序中使用 axios 访问一个 keycloak，但我收到了 cors 错误，有人可以帮我吗？（如果我从 POSTMAN 向我的 keycloak 发帖就可以了）

我使用这个代码：

 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);
    });

并得到这个错误：

但是当我查看请求时，我找不到错误：选项返回 200

但 POST 没有

【问题讨论】：

标签： vue.js axios keycloak

【解决方案1】：

邮递员doesn't care关于同源政策，浏览器做。这就是您的请求在 Postman 中有效但在浏览器中无效的原因。

Access-Control-Allow-Origin 是响应头，不能在客户端请求上设置。正如您从服务器返回的 OPTIONS 响应标头中看到的那样：Access-Control-Allow-Origin: http://localhost:8080

在开发环境中，解决此问题的最佳方法是在您的 vue 配置中设置 proxy。否则你应该配置服务器允许来自localhost:8080的请求

【讨论】：

【解决方案2】：

在 Keycloak notas-front 客户端配置中正确配置 Web Origins。

【讨论】：