如何解决 OKTA 托管注销上的 CORS 错误

如何解决如何解决 OKTA 托管注销上的 CORS 错误

我正在尝试将 OKTA 添加到我的 React 应用程序中。我已经登录，可以正常工作。但我正在为退出而苦苦挣扎。

设置：我在 these instructions from OKTA 之后将 OKTA 添加到我的项目中。

这基本上有效，但包括这些调用登录的说明

  const { authState,authService } = uSEOktaAuth();
  const login = () => authService.login('/profile');

找不到

authService。所以我去了OKTA Example并将其更改为

  const { authState,oktaAuth } = uSEOktaAuth();
  const login = async () => oktaAuth.signInWithRedirect();

这也意味着

authService.signOut();

改为

oktaAuth.signOut();

问题：正如我上面所说，我可以正常登录。 authState.isAuthenticated 解析为 True。

但是，当我尝试退出时，React 报告“未处理的拒绝（AuthApiError）”错误：

控制台报告这些错误：

Access to XMLHttpRequest at 'https://dev-7869221.okta.com/oauth2/default/v1/revoke' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

POST https://dev-7869221.okta.com/oauth2/default/v1/revoke net::ERR_Failed

Uncaught (in promise) AuthApiError

我克隆了 OKTA 示例代码，并在我的应用程序详细信息中进行了硬编码。登录/注销在演示应用程序上运行良好。当我注销配置对象时，它们匹配。所以我得出结论：

我的 OKTA 应用程序配置正确。
示例应用做了一些我没有注意到的事情
OKTA 文档已过时提供这些详细信息。

为了完整起见，我的源代码和 package.json 如下。该应用程序是使用打字稿模板通过 create-react-app 创建的。

export const config = {
    clientId,issuer: `https://${domain}/oauth2/default`,redirectUri: 'http://localhost:3000/login/callback',scopes: ['openid','profile','email'],pkce: true,disableHttpsCheck: false,};

const oktaAuth = new OktaAuth(config);

const CALLBACK_PATH = '/login/callback';

function App() {
    return (
        <Router>
            <Security oktaAuth={oktaAuth}>
                <Switch>
                    <Route path={CALLBACK_PATH} component={LoginCallback}/>
                    <Route path={'/'} component={Main} exact/>
                    <Route path={'/orgList'} component={OrgList}/>
                </Switch>
            </Security>
        </Router>
    );
}

export default App;

import React from 'react';
import { uSEOktaAuth } from '@okta/okta-react';

function Main() {
    const { authState,oktaAuth } = uSEOktaAuth();

    const login = async () => oktaAuth.signInWithRedirect();
    const logout = async () => oktaAuth.signOut();

    if( authState.isPending ) {
        return (
            <>
                <div>Loading authentication...</div>
            </>
        );
    } else if( !authState.isAuthenticated ) {
        return (
            <>
                <div>
                    <button onClick={login}>Login</button>
                </div>
            </>
        );
    }
    return (
        <>
            <button onClick={logout}>logout</button>
        </>
    );
}

export default Main;

{
  "name": "okta-test-app","version": "0.1.0","private": true,"dependencies": {
    "@okta/okta-auth-js": "^4.5.0","@okta/okta-react": "^4.1.0","react": "^17.0.1","react-dom": "^17.0.1","react-router-dom": "^5.2.0","web-vitals": "^0.2.4"
  },"devDependencies": {
    "@testing-library/jest-dom": "^5.11.6","@testing-library/react": "^11.2.2","@testing-library/user-event": "^12.6.0","@types/jest": "^26.0.19","@types/node": "^12.19.9","@types/react": "^16.14.2","@types/react-dom": "^16.9.10","@types/react-router-dom": "^5.1.6","cross-env": "^7.0.3","react-scripts": "4.0.1","typescript": "^4.1.3"
  },"scripts": {
    "start": "cross-env PORT=3000 react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"
  },"eslintConfig": {
    "extends": [
      "react-app","react-app/jest"
    ]
  },"browserslist": {
    "production": [
      ">0.2%","not dead","not op_mini all"
    ],"development": [
      "last 1 chrome version","last 1 firefox version","last 1 safari version"
    ]
  }
}

解决方法

您需要在 Okta 中添加您的主机名作为“可信来源”。为此，请登录 Okta Admin > Security > API > Trusted Origins > 单击 Add Origin 并输入您的应用程序 URL，例如 http://127.0.0.1:3000

如何解决 OKTA 托管注销上的 CORS 错误

如何解决如何解决 OKTA 托管注销上的 CORS 错误

解决方法

见文档： https://support.okta.com/help/s/question/0D51Y00007w9P8f/implicitcallback-returning-authapierror-screen-in-single-sign-on?language=en_US

https://developer.okta.com/docs/reference/error-codes/

https://devforum.okta.com/t/cors-issues-while-testing-on-device/857/2