> For the complete documentation index, see [llms.txt](https://brianwu.gitbook.io/brian/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://brianwu.gitbook.io/brian/brians-za-ji/guan-nian/cors-and-ssl.md). # CORS & SSL 參考資料:() 參考資料:() ## 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 物件，傳到函數裡。