angular.js - 同一資源jquery跨域成功$resource().save()失敗
给我你的怀抱
给我你的怀抱 2017-05-15 16:51:41
0
3
744

jquery的請求如下:

angularjs的請求如下:

给我你的怀抱
给我你的怀抱

全部回覆(3)
伊谢尔伦

你仔細看下你的兩個請求在request上的差異,我說的是content-type這個部分,jquery預設的content-type是application/x-www-form-urlencoded,是簡單請求,不需要preflight (就是第二張圖裡的options請求)。而angular預設的post請求的content-type是application/json,這是複雜請求,主要進行preflight,但你既然碰到錯誤了,就表示你的後端並沒有處理options情況,兩個解決辦法:

  1. 手動給你的angular resource服務設定header,將content-type改成application/x-www-form-urlencoded。 (不確定resources是否可以自訂header,因為resources其實是標準restful服務)

  2. 要求你的後端程式做相應修改,使其能夠處理複雜請求(實際上是非常小的改動,無論java, python還是ruby on rails都有現成的解決方案)

小葫芦

你注意看 你用jquery發送請求的時候,響應的Response Headers設定了 Access-Control-Allow-Origin,因此你可以跨域;
但是你用Angular發送的時候這個頭沒有,應該是你伺服器端回應的邏輯做了什麼判斷,導致這個頭沒有正常設定。

phpcn_u1582

@依雲 並不是 Angular 認為需要 preflight,而是瀏覽器認為(由於 Angular 對 HTTP 請求的配置,Content-TypeCache-Control,根據 MDN 文件)需要發起 preflight。

@YAN_YANG 從回應頭來看,你的伺服器允許 preflight 請求,你可以從服務端把這個刪除。不清楚你是怎麼設定 CORS 的,舉例例如在 Apache 裡有類似的設定:

Header set Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

OPTIONS 選項去掉可以直接避免去回應 preflight,當然你合理的處理它才是正確的。 (參見:http://stackoverflow.com/questions/23954433/post-request-with-angularj...)

另外你 Angular 那邊設定了正確的 request headers 嗎? (針對 CORS 的)

http://chstrongjavablog.blogspot.sg/2013/04/enabling-cors-for-jetty.ht...

這篇文章解釋了 OPTIONS 的種種困擾,以及為什麼 jQuery 沒問題(針對 CORS 專門去除了 HEADER),另外還有一個 Java 的 CORS 實現,和請求時 HEADER 的設定。 Angular 怎麼設,查 $httpProvider 的文檔即可。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板