跨域問題之ajax

前端跨域問題比較集中的出如今ajax跨域上，事實上我也回答過不少相關的問題，線上線下都有。這裏簡單的列舉幾類。

首先澄清一點，瀏覽器的同源策略引發了跨域訪問限制這個問題。同源策略的初衷是阻止惡意js腳本訪問其餘域的敏感數據（設想其餘網站的js代碼能夠調用你網銀的支付或者轉帳功能）。但有不少網站，先後臺不在同一個域下，或者多個域下的幾個子頁面須要交換數據，這就必須繞過同源策略，這就是跨域。針對要訪問資源的不一樣，跨域有不少種方式，今天說的是ajax的跨域問題。但咱們不討論具體的實現，只是列舉我解答過的幾種問題。這幾種問題回答的次數都很多，具備廣泛性，因此以爲有必要記錄一下。

爲何form表單能夠直接訪問後臺API，ajax不行？

跨域問題針對的是比較危險的js代碼，不會阻止其餘動做觸發的跨域訪問。

爲何ajax發出了而且後臺正確相應（好比返回碼是200 OK），而後纔是瀏覽器阻止跨域並報錯？

首先同源策略是瀏覽器自己的策略，這意味後臺服務器並不關心前臺是否跨域。因此數據沒問題的話，後臺能夠正常返回結果。

當瀏覽器收到服務器的返回數據以後，檢查來源，發現和腳本的執行方並不屬於同一域，而且未發現後臺容許此域下腳本訪問（根據一組http header，這個我會另開一篇文章單獨說明），因而丟棄結果並報告錯誤。注意，此時js腳本不能收到數據。

有的同窗可能要問爲何瀏覽器不在儘量早的時候阻止對後臺的訪問？由於瀏覽器並不能肯定後臺是否容許訪問，因此它必須等到後臺返回，檢查結果中是否包含一組特殊的http header，以說明腳本執行方是否有訪問權限。若是有，則將數據轉交給js代碼，若是沒有，則丟棄結果，報告錯誤。

爲何我使用了jquery 的jsonp，但依然沒法獲得後臺的數據？

jsonp須要後臺配合你，也便是，後臺也須要實現相關的功能。使用jsonp訪問訪問任何受限制的API，是不可能的。

---

歡迎你們留言，若是有比較典型的問題，我會繼續追加到這篇文章後面，謝謝。

若是對你有所幫助或者啓發，請幫我點贊和收藏。