302 Okta 重定向 - CORS 问题

Posted 2023-03-04

【中文标题】302 Okta 重定向 - CORS 问题

【英文标题】：302 Okta redirect - CORS issue

【发布时间】：2021-12-22 15:54:10

【问题描述】：

我有一个 Spring Boot 应用程序配置为使用 Okta 作为 SP 发起的 SSO，我已将 Okta 开发人员帐户配置为使用“OIDC - OpenID Connect”和“Web 应用程序”作为应用程序类型。

当我从浏览器访问 SP 端点时访问 Okta 的登录页面没有问题 例如：http://localhost:8080/api/login

但是，当我从我的 React 应用程序调用 API 端点时，它会因 CORS 问题而失败

axios(
    method: 'GET',
    url: 'http://localhost:8080/api/login',
    withCredentials: true
)
.then(response => 
    if (response.data.userID)
    
        console.log("UserId:" + response.data.userID);
    
)
.catch(error => 
    console.error(error);
)

这里是重定向到 Okta(302) 似乎有问题的标题信息：

我已在 Okta 管理控制台中更新了 react 应用的 url 可信来源

以下是 Okta 的登录重定向 uris

Okta Signin URIs

这是我的 Spring Boot 配置：

@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true)
@EnableOAuth2Sso
public class SecurityConfig extends WebSecurityConfigurerAdapter 

    @Bean
    public CorsConfigurationSource corsConfigurationSource() 
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(Arrays.asList("*"));
        configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"));
        configuration.setAllowedHeaders(Arrays.asList("authorization", "content-type", "x-auth-token"));
        configuration.setExposedHeaders(Arrays.asList("x-auth-token"));
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    
    @Override
    public void configure(WebSecurity webSecurity) throws Exception 
        webSecurity
                .ignoring()
                .antMatchers(HttpMethod.OPTIONS, "/**")
                .and()
                .ignoring();
    
    

有什么想法吗？我在这里错过了什么？

【问题讨论】：

我在这里看不到 CORS 的任何问题，至少从您所描述的情况来看。您的网络应用程序将您的呼叫重定向到 /api/login 到 /login。不知道为什么，但从上面的描述中不清楚 Okta 是否参与其中。我的感觉是您的前端与后端没有任何会话信息，因此后端会重定向到/login

/login 是 Okta 的 sigin URI，我已经更新了问题。如果它重定向我应该得到 Okta 的登录页面而不是我得到 CORS 问题。

您确定您是从 Okta 而不是从后端收到 CORS 问题吗？我在您提供的对 Okta URL 的单个调用的信息中看不到任何地方

localhost:8080/login 在 Okta 的管理控制台中被配置为重定向 URI，如果您观察到它试图重定向到 /login uri 的响应标头，我已经发布了 Okat 的管理控制台 Sigin URI

【参考方案1】：

您为使用过的技术使用了错误的流程。在应用程序类型中也提到了它：

对 React 应用程序（本机应用程序）使用正确的流程 - Authorization Code Flow with Proof Key for Code Exchange (PKCE)，您不会遇到 CORS 问题。或者将您的前端编写为服务器端应用程序，而不是 SPA (React)。