CORS & SSL

參考資料:(https://kknews.cc/zh-tw/tech/e8apaan.html)

參考資料:(https://blog.techbridge.cc/2017/05/20/api-ajax-cors-and-jsonp/)

CORS, Cross-Origin Resource Sharing 跨源資源共享

當 Protocol、Domain、Port 有其中一個不同，即為跨域。

CORS 的作用，主要是用來改善網路應用程式，開發人員要求 瀏覽器 必須允許跨域請求

同源政策

因為瀏覽器基於安全性考量，有一個東西叫做 同源政策 Same-origin policy。意思是如果呼叫的 API 網站跟自己不同源(也就是跨域)，雖然 Request 還是會照發，但是 Response 會被擋下來。

注意：Request 還是有發出去，而瀏覽器也確實有收到 Response，但瀏覽器因為同源政策，不把結果回傳給你

相對於同源政策，當然也就有另外一種規範：如果你想在不同的 origin 之間傳輸資料的話，你應該怎麼做。 這種規範，就叫做 CORS。

CORS

這套規範跟你說，如果想開啟跨來源 HTTP Request 的話，Server 必須在 Response 的 Header 加上 Access-Control-Allow-Origin 這個屬性。

當瀏覽器收到 Response 的時候，會先檢查這個屬性，如果這個屬性內包含 現在這個發起 Request 的 Origin 的話，就會允許通過，讓程式可以順利地接收到 Response。

除了 Access-Control-Allow-Origin 之外，還有 Access-Control-Allow-Headers 和 Access-Control-Allow-Methods 可以去定義。

Preflight Request

簡單請求

定義：沒有加入自定義 Header、HTTP Method : GET

而這個定義之外的，就不是簡單請求。

而當我們加入了自定義的 Header，在發出真正的 Request 之前，就會先發送一個 Preflight Request (預檢請求)，因為非簡單請求 可能會帶有一些使用者的資料，因此會先透過預檢請求，去跟 Server 確認我們是否能做這樣的動作。如果這個預檢請求沒有通過的話，則真正的 Request 就不會發送。

為什麼要有這樣的設計呢? 因為我們上面講到的，瀏覽器的 CORS 機制，會實際去呼叫 API，但是會擋住 Resonse，讓使用者收不到。但如果去呼叫什麼新增、修改、刪除的指令，讓 Server 實際去執行了，也真的把資料刪除了，那就糟糕了。所以會發一個 OPTIONS 先去跟 Server 確認能不能執行，如果沒有通過，就不會真的發送 Request。

JSONP

全名叫做：JSON with Padding

使可以用 GET 的方式，去取得回應，並利用 callback 這個參數，當作回傳的函式名稱，將回應的 javascript 物件，傳到函數裡。