angular.js - 同一資源jquery跨域成功$resource().save()失敗

Question

jquery的請求如下：

angularjs的請求如下：

Answer 1

你仔細看下你的兩個請求在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都有現成的解決方案）

Answer 2

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

Answer 3

@依雲 並不是 Angular 認為需要 preflight，而是瀏覽器認為（由於 Angular 對 HTTP 請求的配置，Content-Type 和 Cache-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 的文檔即可。