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

我正在尝试将OKTA添加到我的React应用程序中。我已登录以正常工作。但我正在努力注销

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

这主要是有效的，但包括了调用登录的说明

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

找不到authService。所以我去了医院，把它改成了

  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如下。 该应用程序是使用typescript模板使用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;

---

您需要在Okta中添加主机名作为可信源。要执行此操作，请登录Okta Admin>Security>API>Trusted Origins>单击Add Origins并输入您的应用程序url，例如

见文件：

---

您需要在Okta中添加主机名作为可信源。要执行此操作，请登录Okta Admin>Security>API>Trusted Origins>单击Add Origins并输入您的应用程序url，例如

见文件：

---

甚至没有考虑这一点，因为期权的回报率是200。谢谢甚至没有考虑这一点，因为期权的回报率是200。谢谢

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