跨域問題及其解決方案

一、 什麼是跨域問題？

跨域是指瀏覽器不能執行其他網站的腳本，他是由瀏覽器的同源策略導致的，是瀏覽器對JavaScript施加的安全限制。
所謂同源是指，協議、域名和端口號均相同。
注意：localhost與127.0.0.1雖說都代表本機，但是也非同源。

二、解決跨域問題的方法

1.jsonp(json padding)
jsonp利用<script>標籤的沒有跨域限制的漏洞，來達到與第三方通訊的目的。
當需要與第三方通訊時，在本站創建一個<script>元素，地址指向第三方API，並創建一個回調函數，當返回結果時，調用該回調函數，處理返回結果。回調函數名稱可通過地址參數告知，也可雙方事先約定。返回結果形如：
callback({“name”:”li”,”age”:18})

2.cors(跨域資源共享)
cors定義了在訪問跨域資源時，瀏覽器與服務器之間如何溝通。基本思想是使用自定義的頭部來讓瀏覽器和服務器之間進行溝通，從而決定請求或響應是應該成功或者失敗。

• 不會觸發CORS預檢請求的情況：
  
  • 請求類型爲GET、POST、HEAD
  • 當發送POST請求時，僅當Content-Type值等於下列之一：
    text/plain
    multipart/form-data
    application/x-www-form-urlencoded

• 觸發CORS預檢請求的情況

  • 請求類型爲DELETE、OPTIONS、 TRACE 、PUT、 CONNECT 、PATCH

  • 認爲設置了cors安全首部字段集合之外的其他首部字段。

    • cors安全首部字段集合爲：
      
      • Accept
      • Accept-Language
      • Content-Language
      • Content-Type (but note the additional requirements below)
      • DPR
      • Downlink
      • Save-Data
      • Viewport-Width
      • Width

  • Content-Type 的值不屬於下列之一:

    • application/x-www-form-urlencoded
    • multipart/form-data
    • text/plain

總結：
jsonp與cors的區別：
1.請求類別
jsonp只支持GET請求，cors支持所有類型的請求方式
2.瀏覽器版本
jsonp支持較老版本的瀏覽器，cors支持絕大多數的現有瀏覽器
3.發送請求
cors可以使用普通的XHR發送請求和獲取數據，與jsonp相比，有更好的錯誤處理機制。
jsonp只支持跨域http請求，不能解決不同域的兩個頁面之間JavaScript進行調用的問題。
4.同源策略限制
jsonp不受同源策略限制，兼容性更好
CORS在進行ajax請求時，爲了兼容IE瀏覽器，還需創建ActiveX對象。