Keycloak returns CORS 访问控制允许来源错误

Question

我可以使用 keycloak-js 客户端登录 Keycloak，但是，在发出 fetch 请求时，我收到以下错误：

Access to fetch at 'https://xxxxxxxx.com/auth/realms/app_testing/protocol/openid-connect/token' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我提出的post请求是

var formData = new FormData()
formData.append("client_id", 'vue_blog_gui');
formData.append("grant_type", "password");
formData.append("client_secret", "705669d0-xxxx-xxxx-xxxx-4f4e52e3196b");
formData.append("scope", "openid");
formData.append("username", "user@example.com")
formData.append("password", "123")

fetch(
  'https://xxxxxxxx.com/auth/realms/app_testing/protocol/openid-connect/token',
  {
    method: 'POST',
    'Content-Type': 'application/x-www-form-urlencoded',
    data: formData
  }
)

keycloak 设置为

根 URL：http://localhost:8080
有效的重定向 URI：http://localhost:8080
基地URL：/
管理员URL：空
Web Origins: * // 但我也尝试过 http://localhost:8080 和 +

我的应用程序在 http://localhost:8080

上运行

Answer 1

我设法解决了问题。这是我发送给 Keycloak 的数据格式。我需要对 FormData 进行 URLEncode，将其添加到 Fetch 请求的正文中。此外，在获取请求中使用 data 而不是 body。

无论如何，我通过将所有数据放入 PostMan 来解决它，让它在那里工作，然后利用 Postman 提供的自动代码生成来解决这个问题。

var myHeaders = new Headers();
myHeaders.append('Content-Type', 'application/x-www-form-urlencoded');

var urlencoded = new URLSearchParams();
urlencoded.append('client_id', 'vue_blog_gui');
urlencoded.append('username', 'me@example.com');
urlencoded.append('password', 'password');
urlencoded.append('grant_type', 'password');
urlencoded.append('scope', 'openid');
urlencoded.append('client_secret', '705669d0-xxxx-xxxx-xxxx-4f4e52e3196b');

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: urlencoded,
  redirect: 'follow',
};

fetch(
  'https://keycloak.server.example.com/auth/realms/app_testing/protocol/openid-connect/token',
  requestOptions
)
  .then((response) => response.text())
  .then((result) => console.log(result))
  .catch((error) => console.log('error', error));

Keycloak returns CORS 访问控制允许来源错误

Keycloak returns CORS Access-Control-Allow-Origin error

javascript

cors

vue.js

keycloak

keycloak-services