keycloak~正確讓api介面支援跨域

张占岭發表於2024-05-23
API跨域

相關參考

  • https://leejjon.medium.com/how-to-allow-cross-origin-requests-in-a-jax-rs-microservice-d2a6aa2df484
  • https://stackoverflow.com/questions/28065963/how-to-handle-cors-using-jax-rs-with-jersey
  • https://keycloak.discourse.group/t/cors-problem-in-custom-rest-endpoint/7437
  • https://stackoverflow.com/questions/47860019/keycloak-cors-headers-in-401

jax-ws環境的cors

return Response.ok()
         .entity(p)
         .header("Access-Control-Allow-Origin", "*")
         .header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT")

keycloak對jax-ws的cors封裝

下面是keycloak原始碼中，針對/cert這個介面的跨域請求

@OPTIONS
@Path("certs")
@Produces(MediaType.APPLICATION_JSON)
public Response getVersionPreflight() {
    return Cors.add(request,     Response.ok()).allowedMethods("GET").preflight().auth().build();
}

@GET
@Path("certs")
@Produces(MediaType.APPLICATION_JSON)
@NoCache
public Response certs() {
  // 相關業務程式碼
   Response.ResponseBuilder responseBuilder =
        Response.ok().cacheControl(CacheControlUtil.getDefaultCacheControl());
    return Cors.add(request, responseBuilder).allowedOrigins("*").auth().build();

}

org.keycloak.services.resources.Cors物件

org.keycloak.services.resources.Cors 類是 Keycloak 中用於處理跨域資源共享（CORS）的工具類。在 Web 開發中，由於瀏覽器的同源策略限制，跨域請求可能會受到限制，而 CORS 是一種機制，允許伺服器宣告哪些源可以訪問其資源。

org.keycloak.services.resources.Cors 類提供了一些方法來幫助處理 CORS 相關的邏輯，包括：

  • checkCorsPreflightRequest：用於檢查是否為 CORS 預檢請求（Preflight Request），並根據請求頭資訊進行相應處理。
  • addHeaders：向響應中新增 CORS 相關的頭資訊，如 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 等。

透過使用 org.keycloak.services.resources.Cors 類，你可以更方便地處理跨域請求，確保符合 CORS 的規範，從而使得客戶端能夠安全地與 Keycloak 服務進行互動。這個類在 Keycloak 中的一些內部實現中被使用，以確保跨域請求能夠正確處理和響應。

跨域說明

當前端向後端傳送xhr請求時，如果域名不同（a.shop.com和b.shop.com，雖然主域相同，但對於cors來說，也是跨域），瀏覽器會先發一個options的請求，返回是否支援跨域，並且告訴客戶端哪些(get,post,put,delete)方式支援跨域。

例如，如果服務端支援跨域，你的瀏覽器傳送的OPTIONS請求將會返回如下截圖：

相關文章