Keycloak OIDC 令牌端点的 CORS 问题

Question

我在尝试从 Keycloak OIDC 令牌端点获取访问令牌时遇到 CORS（跨域资源共享）问题。我在 http://localhost:8000 上运行我的 Web 应用程序，并且 Keycloak 在 http://localhost:8080 上运行。

当我的应用程序向 http://localhost:8080/realms/myrealm/protocol/openid-connect/token 发出请求时，我收到以下 CORS 错误：

Access to XMLHttpRequest at 'http://localhost:8080/realms/myrealm/protocol/openid-connect/token' from origin 'http://localhost:8000' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:8080' that is not equal to the supplied origin.

我已在 Keycloak 管理控制台上的客户端设置中配置了以下设置：

有效的重定向 URI：http://localhost:8000/ 有效的注销后重定向 URI：http://localhost:8000/ 网络起源：http://localhost:8000 尽管有这些配置，当我的应用程序尝试从 Keycloak OIDC 令牌端点获取访问令牌时，CORS 问题仍然存在。

有人可以帮助我解决此 CORS 问题并允许我的应用程序从 Keycloak OIDC 令牌端点成功获取访问令牌吗？

我的Keycloak版本是22.0

这是我的app.js

var express = require('express');
var app = express();
var stringReplace = require('string-replace-middleware');

var KC_URL = process.env.KC_URL || "http://localhost:8080";
var SERVICE_URL = process.env.SERVICE_URL || "http://localhost:3000/secured";

app.use(stringReplace({
   'SERVICE_URL': SERVICE_URL,
   'KC_URL': KC_URL
}));
app.use(express.static('.'))

app.get('/', function(req, res) {
    res.render('index.html');
});

app.get('/client.js', function(req, res) {
    res.render('client.js');
});

app.listen(8000);

<!DOCTYPE html>
<html>
<head>
    <title>Keycloak Example Application</title>
    <script type="text/javascript" src="KC_URL/js/keycloak.js"></script>
    <script type="text/javascript">
        function output(content) {
            if (typeof content === 'object') {
                content = JSON.stringify(content, null, 2)
            }
            document.getElementById('output').textContent = content;
        }

        function profile() {
            if (kc.idTokenParsed.name) {
                document.getElementById('name').textContent = 'Hello ' + kc.idTokenParsed.name;
            } else {
                document.getElementById('name').textContent = 'Hello ' + kc.idTokenParsed.preferred_username;
            }
            if (kc.idTokenParsed.picture) {
                document.getElementById('picture').src = kc.idTokenParsed.picture;
            }
            document.getElementById('user').style.display = 'block';
        }

        function sendRequest() {
            var req = new XMLHttpRequest();
            req.onreadystatechange = function() {
                if (req.readyState === 4) {
                    output(req.status + '\n\n' + req.responseText);
                }
            }
            req.open('GET', 'SERVICE_URL', true);
            req.setRequestHeader('Authorization', 'Bearer ' + kc.token);
            req.send();
        }

        var kc = new Keycloak({ realm: 'myrealm', clientId: 'myclient' });
        window.onload = function() {
            kc.init({'messageReceiveTimeout': 100000}).then(function() {
                if(kc.authenticated) {
                    profile();
                } else {
                    document.getElementById('anonymous').style.display = 'block';
                }
            });
        }
    </script>
</head>
<body>

<div id="anonymous" style="display: none">
    <button onclick="window.kc.login()">Login</button>
</div>

<div id="user" style="display: none">
    <button onclick="window.kc.logout()">Logout</button>
    <button onclick="output(kc.idTokenParsed)">Show ID Token</button>
    <button onclick="output(kc.tokenParsed)">Show Access Token</button>
    <button onclick="window.kc.updateToken(-1).then(function() { output(kc.idTokenParsed); profile() })">Refresh</button>
    <button onclick="sendRequest()">Invoke Service</button>
    <hr/>
    <h2 id="name"></h2>
    <img id="picture" width="50px" height="50px"/>
    <hr/>
    <pre id="output"></pre>
</div>



</body>
</html>

我正在使用 Docker 运行 keycloak

docker run -p 8080:8080 \
           -p 8443:8443 \
           --add-host=host.docker.internal:host-gateway  \
           --name keycloak  \
           -e KEYCLOAK_USER=admin  \
           -e  KEYCLOAK_PASSWORD=admin  \
quay.io/keycloak/keycloak:22.0.0 start-dev

Answer 1

我的“Allow CORS: Access-Control-Allow-Origin”扩展已打开。把它关掉就解决了问题

Keycloak OIDC 令牌端点的 CORS 问题

问题描述投票：0回答：1

1个回答

最新问题

Keycloak OIDC 令牌端点的 CORS 问题

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1