CORS - Cross-Origin Resource Sharing 跨來源資源共用

關於 CORS 最簡單的理解大概是在 A 網域的頁面呼叫了 B 網域的資源時，會發出的跨網域請求。只要是不同的網域、PORT、通訊協定，通通都算跨網域。

基於安全性考量，程式碼所發出的跨網域 HTTP 請求 (XMLHttpRequest, Fetch)，一樣也會受到 same origin policy 的限制，必須在同個網域內，否則一樣使用 CORS 的請求。

會需要注意 CORS 的 Request:

• XMLHttpRequest, Fetch
• 網頁字體 (跨網域的 css 裡面的 @font-face)
• WebGL 的 texture
• drawImage 用到的圖片 or video frames
• css

這裡就不多寫關於 Simple Request 與 Preflighted requests，可以直接參考 MDN 的網站。

不過當遇到 Preflighted Request 的時候有些要注意的事情。

• WebKit Nightly 與 Safari Technology Preview 對 Accept、Accept-Language (en-US) 及 Content-Language (en-US) 標頭值加入了額外的限制。假如這三個 header 中有任一個擁有「非標準」值，WebKit／Safari 就不會將該請求視為 Simple Request

header('Content-Type: application/json; charset=utf-8');
header('Access-Control-Allow-Origin: http://abc.com');
header('Access-Control-Allow-Methods: POST, GET, DELETE, PUT, PATCH, OPTIONS');
header('Access-Control-Max-Age: 86400');
header("Access-Control-Allow-Headers: Content-Type, Accept");

以上述來說, 如果只想允許 http://abc.com 的網域過來的請求，
就在 Access-Control-Allow-Origin 放入 http://abc.com, https 則是 https://abc.com

如果有其他客製化或是非標準值的 header，
則需要在 Access-Control-Allow-Headers 這邊填入需允許的 headers.
因為安全性的考量，盡量不要使用 * 偷懶 !