使用 ReactJS 應用程序命中端點時，Keycloak 保護 Spring Boot 應用程序 CORS 錯誤

Question

我有一個 ReactJS 和 Java Spring Boot 應用程序，它們都由 Keycloak 11.0.2 保護。

Keycloak 在端口 8083 上，ReactJS 在 3000 上，Spring App 在 8085 上。如果我嘗試使用下面提供的配置，我將無法訪問我的端點並且我收到 CORS 錯誤。

火狐：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8083/auth/realms/sorcerer_realm/protocol/openid-connect/auth?response_type=code&client_id=event_sorcerer&redirect_uri=http%3A%2F%2Flocalhost%3A8085%2Fsso%2Flogin&state=f52216b1-c235-4328-a2f9-d8448c3bf886&login=true&scope=openid. (Reason: CORS request did not succeed).

Chrome 和 Microsoft Edge：

Access to XMLHttpRequest at 'http://localhost:8083/auth/realms/sorcerer_realm/protocol/openid-connect/auth?response_type=code&client_id=event_sorcerer&redirect_uri=http%3A%2F%2Flocalhost%3A8085%2Fsso%2Flogin&state=f57ffa9f-9679-4476-aa03-af86c3abb3c2&login=true&scope=openid' (redirected from 'http://localhost:8085/api/worker/create/product') 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.


xhr.js:184 GET http://localhost:8083/auth/realms/sorcerer_realm/protocol/openid-connect/auth?response_type=code&client_id=event_sorcerer&redirect_uri=http%3A%2F%2Flocalhost%3A8085%2Fsso%2Flogin&state=f57ffa9f-9679-4476-aa03-af86c3abb3c2&login=true&scope=openid net::ERR_FAILED

當我嘗試使用 Postman 訪問我的端點時，我能夠訪問它。 下面是我的 Keycloak 網絡安全配置。 配置使用 application.properties 文件來配置 Keycloak 適配器。 當我在配置中設置.authorizeRequests().antMatchers("/**").permitAll()時，我還可以從瀏覽器和 Postman 訪問我的端點。

@KeycloakConfiguration
public class SecurityConfiguration extends KeycloakWebSecurityConfigurerAdapter {

    @Autowired
    public void configureGlobal(AuthenticationManagerBuilder authBuilder) throws Exception {
        final KeycloakAuthenticationProvider authProvider = keycloakAuthenticationProvider();
        
        authProvider.setGrantedAuthoritiesMapper(new SimpleAuthorityMapper());
        authBuilder.authenticationProvider(authProvider);
    }
    
    
    /**
     * Call superclass configure method and set the Keycloak configuration
     */
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        super.configure(http);
        
        http
            .csrf().disable()
            .cors()
            .and().sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
            .and().anonymous()
            //.and().authorizeRequests().antMatchers("/**").permitAll()         //Uncomment for requests to be allowed!
            .and().authorizeRequests().antMatchers("/api/admin/**").hasRole("ADMIN")
            .and().authorizeRequests().antMatchers("/api/manager/**").hasAnyRole("MANAGER")
            .and().authorizeRequests().antMatchers("/api/worker/**").hasRole("WORKER")
            .anyRequest().authenticated();
    }

    /**
     * Setup Auth Strategy. Don't add prefixes and suffixes to role strings
     */
    @Override
    protected SessionAuthenticationStrategy sessionAuthenticationStrategy() {
        return new RegisterSessionAuthenticationStrategy(new SessionRegistryImpl());
    }
    
    /**
     * Don't use keycloak.json. Instead, use application.yml properties.
     * @return
     */
    @Bean
    public KeycloakSpringBootConfigResolver KeycloakConfigResolver() {
        return new KeycloakSpringBootConfigResolver();
    }
}

這是設置 Keycloak 的 application.properties 的一部分：

spring:
  jersey:
    type: filter


security: 
    oauth2: 
      resourceserver: 
        jwt: 
          issuer-uri: http://localhost:8083/auth/realms/sorcerer_realm/protocol/openid-connect/token
          jwk-set-uri: http://localhost:8083/auth/realms/sorcerer_realm/protocol/openid-connect/certs 


keycloak:
  realm: sorcerer_realm
  auth-server-url: http://localhost:8083/auth/
  ssl-required: external
  resource: event_sorcerer
  verify-token-audience: true
  credentials:
    secret-jwt:
      secret: d84611c9-af79-423b-b12c-bfa7fec23e85
  use-resource-role-mappings: true
  confidential-port: 0

這是我的 ReactJS 應用程序的 Keycloak 適配器設置：

const keycloakConfig = {
    "clientId": "event_sorcerer_frontend",
    "realm": "sorcerer_realm",
    "auth-server-url": "http://localhost:8083/auth/",
    "url": "http://localhost:8083/auth",
    "ssl-required": "external",
    "resource": "event_sorcerer",
    "public-client": true,
    "verify-token-audience": true,
    "use-resource-role-mappings": true,
    "confidential-port": 0
};

const keycloak = new Keycloak(keycloakConfig);

const initKeycloak = (onSuccessCallback, onFailureCallback) => {
    let success = false;

    timeoutWrapper(() => {
        if(!success){
            onFailureCallback();
        }
    });

    keycloak.init({
        onLoad: 'check-sso',
        silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html',
        pkceMethod: 'S256',

    }).then((isAuthenticated) => {
        success = true;
        if(isAuthenticated) {
            onSuccessCallback();
        } else {
            login();
        }
    });
}

這是我將請求發送到服務器的方式：

export const Request = {
    configureAxiosDefault: () => {
        axios.defaults.baseURL = axiosDefaultConfiguration.baseUrl;
    },

    create: (data, endpoint, callback, errorCallback, finalCallback) => {
        axios.post(serverEndpoint + endpoint, {
            data: data,
            headers: {
                Authorization: `Bearer ${UserService.getToken()}`
            }
        })
        .then(response => Utility.isEmpty(callback) ?  defaultCallback(response) : callback(response))
        .catch(response => Utility.isEmpty(errorCallback) ? defaultErrorCallback(response) : errorCallback(response))
        .finally(response => {
            if(!Utility.isEmpty(finalCallback)) {
                finalCallback(response);
            }
        });
    },
}

這是我的前端 Keycloak 配置。 后端是相同的，除了訪問類型是機密的並且根/基本 url 不同（不是 3000 而是 8085）：

這是我的 CORS 配置 bean：

@Configuration
public class CORSConfiguration {
    /**
     * Setup CORS
     * @return
     */
    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        
        config.setAllowCredentials(true);
        config.setAllowedOrigins(Arrays.asList("http://localhost:3000"));
        config.setAllowedMethods(Arrays.asList(CorsConfiguration.ALL));
        config.setAllowedHeaders(Arrays.asList(CorsConfiguration.ALL));
        config.setAllowCredentials(true);
        source.registerCorsConfiguration("/**", config);
        
        return source;
    }
}

最后，這是我的終點。 URL 解析為api/worker/create/product

@RestController
@RequestMapping(ControllerEndpointsPrefix.WORKER + "/create")
public class CreationController {
    @Autowired
    private UserAgregate userAgregate;

    @PostMapping("/product")
    public boolean createProduct(@RequestBody CreateProductCommand command) {
        return true;
    }
}

Answer 1

我已經設法解決了這個問題。 問題不在服務器端，而是在客戶端。

configureAxiosDefault: () => {
    axios.defaults.baseURL = axiosDefaultConfiguration.baseUrl;
    axios.defaults.headers.Authorization = `Bearer ${UserService.getToken()}`
},

create: (data, endpoint, callback, errorCallback, finalCallback) => {
        axios.post(serverEndpoint + endpoint, data)
        .then(response => Utility.isEmpty(callback) ?  defaultCallback(response) : callback(response))
        .catch(response => Utility.isEmpty(errorCallback) ? defaultErrorCallback(response) : errorCallback(response))
        .finally(response => {
            if(!Utility.isEmpty(finalCallback)) {
                finalCallback(response);
            }
        });
    },

服務器無法處理令牌，因為我將它作為 JSON 對象屬性發送。 這些更改使一切正常。

因此，CORS 根本不是問題。 問題是請求不包含授權標頭。

有很多關於 KeyCloak 的 StackOverflow 問題，其中一些是不完整和神秘的。 由於 OpenJDK、JDK 版本等原因，我遇到了大量錯誤。如果有人需要解釋和解決方案，可以在我的存儲庫中找到有效的 Spring Boot 配置： https://github.com/milosrs/EventSorcererBackend : https://github.com/milosrs/EventSorcererBackend