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

设置: these instructions 从奥克塔。

这基本上是有效的,但是包含了调用登录的这些说明

  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 决意为真。

控制台报告以下错误:

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应用程序配置正确。

为了完整我的源代码和包.json在下面。 应用程序是用 create-react-app 使用typescript模板。

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"
    ]
  }
}