reactjs 如何从React应用程序重定向到Keycloak日志页面

vybvopom  于 5个月前  发布在  React
关注(0)|答案(2)|浏览(70)

我用JavaScript配置了keycloak,并想检查是否一切正常。为此,我创建了这两个脚本。一个是axios脚本,用于将请求发送到服务器,另一个是服务器端脚本。脚本处理请求。但它并没有像我预期的那样将我重定向到keycloak登录页面。我得到了一个错误,而不是这里有一些截图:谢谢
下面是我用来发送请求的脚本

const PORT = 3001
const HOST = `http://localhost:${PORT}`;

/**
 * This function aim is to log the user in
 * @param user the user username
 * @param pwd the user password
 **/
export function loginRequest(user, pwd,) {
    axios.post(`${HOST}/ `, {
        email: `${user}`,
        pwd: `${pwd}`
    })
        .then(function (res) {
            return res.data
        })
        .catch(function(err) {
            console.log('ERROR while sending login request :', err);
        })

    return false;
}

字符串
There is my front-ent where am getting the error. i just use the button to send request on click

There is my keycloak configuration
我尝试了很多东西在互联网上找到像添加**+**在网站的起源领域,但没有工作.

iqjalb3h

iqjalb3h1#

抛出CORS错误的不是“axios”,而是您的浏览器。
CORS是一个浏览器端的安全结构。当你的浏览器去做一个“fetch”或“axios”调用时,它首先向URL发送一个OPTIONS请求,它最终会对这个URL发出一个GET/POST/PUT/.请求。
浏览器查看OPTIONS请求的响应头。这就是服务器告诉浏览器“从以下站点获取是安全的:.....”-换句话说,“从来自以下站点的网页调用此服务器的API是安全的:....."。这种机制是服务器如何能够告诉浏览器哪些站点/页面可以安全地调用API。
例如,银行的服务器会指示只有从银行的网站(https://mybank.com)调用API才是安全的。任何在其他地址(例如https://myfakebank.com)上创建网页的人都可以调用银行的API服务器,但浏览器会抛出CORS错误,因为虚假网页不会从“有效”网站提供服务。
因此,在您的情况下,在浏览器的开发工具的网络选项卡中查看对OPTIONS调用的响应的标题,看看它是否给出了适当的响应(即Access-Control-Allow-Origin: *Access-Control-Allow-Origin: http://localhost:3000)。如果没有,那么您的浏览器将不允许您调用http://localhost:3001
在您的配置中似乎也发生了一些奇怪的错误,因为对http://localhost:3001的调用被定向到http://localhost:8080

8tntrjer

8tntrjer2#

我终于有了解决方案。我试图通过点击一个按钮重定向到keycloak登录页面。我发现我必须使用keycloak-js库来管理我的前端keycloak。所以下面的代码帮助了我。
检查文件

// Initialize keycloak
keycloak = new Keycloak({
    url: 'YOUR_KEYCLOAK_URL',
    realm: 'YOUR_REALM',
    clientId: 'YOUR_CLIENT_ID'
})
// check if user is authenticated
// if not, *onLoad: 'login-reqired'* will redirect
// user to keycloak login page 
function initializeAdapter() {
    try {
        return await keycloak.init({
            onLoad: 'login-required'
       });
} catch (e) {
    //TODO replace throw by proper error handling
    throw e;
}}

字符串

相关问题