CORS 跨域請求簡介

摘要： CORS，即Cross-origin resource sharing ，跨域資源共享，常用於幫助瀏覽器實現向不同的域名傳送請求的功能。 瀏覽器為了安全著想，採用了同源策略(即url協議、域名、埠中任何一個不一樣，就認定是跨域的)。預設是不允許js向不同的域名請求資源的，這樣...

CORS，即Cross-origin resource sharing ，跨域資源共享，常用於幫助瀏覽器實現向不同的域名傳送請求的功能。

瀏覽器為了安全著想，採用了同源策略(即url協議、域名、埠中任何一個不一樣，就認定是跨域的)。預設是不允許js向不同的域名請求資源的，這樣可能發生CSRF攻擊。例如B域名有個刪除資料的介面，使用者登入了B域名後，關閉網頁，當然一般情況cookie會在瀏覽器保留一段時間，如果使用者在訪問A域名時，A域名在網頁上面悄悄向B域名傳送刪除請求，如果瀏覽器沒有限制，而B域名的cookie也確實存在，則會造成嚴重後果。

既然後果很嚴重，為什麼還需要CORS 呢，一是前端可能需要向不同的域名獲取資源，二是隨著前後端分離的發展，前端和後端域名如果不同，也許要跨域，如果相同，那運維就要多加配置去讓兩者在同一個域名下了，增加維護成本。

需要注意的是，開啟CORS 後，會有一定的風險， 儘量不要將Access-Control-Allow-Origin 設定為允許所有來源，即’*’ ，另外，前端一定要做好資料的驗證，對於用於的輸入，不要直接拿來作為html元素或者script片段進行執行

伺服器開啟CORS

• 程式舉例：
  • python自帶httpserver 開啟CORS : 見Python 手冊
  • Tornado 開啟CORS : 見Tornado 手冊
  • Flask 開啟CORS : 見Flask 手冊

在每次需要CORS 的時候，瀏覽器會首先發送一個OPTIONS 請求用於預檢，預檢的時候，會帶上Origin(來源域名) 、Access-Control-Request-Method(請求方式) 、Access-Control-Request-Headers(額外頭資訊) ，預檢的這一步，前端不需要做任何的額外操作，OPTIONS 是瀏覽器去傳送的，伺服器收到該請求並檢查完這幾個關鍵頭資訊後，如果沒問題，就會進行這樣的響應(所以伺服器這邊是要接收一個OPTIONS 請求的介面的)，內容隨便，瀏覽器只需要頭:

• Access-Control-Allow-Origin : 必須，允許的來源域名，例如:https://haofly.net:11111 。

• Access-Control-Allow-Method : 允許的請求方法，例如PUT, GET, POST

• Access-Control-Allow-headers : 指定瀏覽器CORS請求額外發送的頭資訊欄位，逗號分割
• Access-Control-Allow-Credentials : 是否允許攜帶cookie，true
• Access-Control-Max-Age : 預檢有效期，在指定事件內不需要再次預檢

而預檢成功後，以後每次請求只需要返回一個Access-Control-Allow-Origin 即可。