前言

在工作中遇到了幾次 CORS 的問題,有時候前後端也不是同一人開發,因此在溝通上也許會有問題,較難察覺問題,因此將遇到的問題記錄下來。

Access-Control-Allow-Origin: *

說到支援跨網域呼叫,最容易查到的解法就是要允許特定來源(origin),這邊以星號(*)代表允許所有來源,如此一來任何網域的 api 連接到伺服器時,都會預設允許該跨網域呼叫。

然而,有時候添加了該 Header,卻仍然不行;

不行的原因容易被人忽略,因此以下詳細解說

OPTIONS

我們可以在 MDN docs 中讀到,在 GET 以外的方法,瀏覽器必須先傳送 OPTIONS 確認伺服器支援。

因此我們會發現,假如使用了 XMLHttpRequest,瀏覽器便會發送 OPTIONS 請求,此時前端工程師使用 chrome 開發者工具,就可以看到 API 請求失敗。


這時候問題來了:

- 假設前端工程師沒有仔細檢查該請求是 OPTIONS

- 假設後端工程師沒有仔細檢查 Log 該請求是 OPTIONS

- 前端工程師表示 跨域請求異常

- 後端工程師表示 Header 已經加上 Access-Control-Allow-Origin

- 後端工程師表示 其他的 GET 請求都可以了啊


這時候問題就卡在這了,因此,請記得請求後端工程師允許 OPTIONS 請求。

 

瀏覽器 debug

jQuery ajax CORS

上述的情形,主要在闡述跨域請求時,XMLHttpRequest Post 發生的問題。

然而,曾經遇到後端工程師以 jQuery ajax 測試跨域 Post API,並不會先發送 OPTIONS 請求,順利呼叫!

因此找不出問題。


有興趣的朋友可以參考以下程式,在伺服器不允許 OPTIONS 方法時,XMLHttpRequest 會回報錯誤,而 jQuery v1.10.2 ajax 不會發送 OPTIONS。

(記得請將網址改成自己的測試伺服器)

FBLINETwitterLinkIn
回部落格