reactjs - 如何解决 OKTA 托管注销上的 CORS 错误
问题描述
我正在尝试将 OKTA 添加到我的 React 应用程序中。我已经登录工作正常。但我正在努力退出。
设置:我按照 OKTA 的这些说明将 OKTA 添加到我的项目中。
这主要是有效的,但包括这些用于调用登录的说明
const { authState, authService } = useOktaAuth();
const login = () => authService.login('/profile');
authService
找不到。所以我去了OKTA 示例并将其更改为
const { authState, oktaAuth } = useOktaAuth();
const login = async () => oktaAuth.signInWithRedirect();
这也意味着
authService.signOut();
变成
oktaAuth.signOut();
问题:正如我上面所说,我可以正常登录。authState.isAuthenticated
解析为真。
但是,当我尝试退出时,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
使用 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"
]
}
}
解决方案
您需要在 Okta 中将您的主机名添加为“受信任的来源”。为此,请登录 Okta Admin > Security > API > Trusted Origins > 单击 Add Origin 并输入您的应用程序 URL,例如http://127.0.0.1:3000
请参阅文档: 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
推荐阅读
- python - PyMC3中嘈杂的或门
- php - PHP + Poedit + Gettext 不适用于西班牙语
- python - 如何将矩形蒙版放在矩形对象上
- python - 基于变量存在的while循环中使用or和管道的写入条件差异
- javascript - javascript .text 调用中的空格
- css - 在导航栏菜单中滚动已修复
- apache-kafka - 使用与 Kafka 主题消息键相同的 ROWKEY 创建 KSQL 表
- docker - 将卷安装到包含同名文件的位置会覆盖这些文件还是会被使用?
- php - 从 API 在 JavaScript 中解析 JSON 复杂数组
- javascript - 如何为滚动视图添加 ActivityIndicator?