一篮昧、跨域概念

? ? ? ?跨域，指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本笋妥。它是由瀏覽器的同源策略造成的懊昨，是瀏覽器對JavaScript施加的安全限制。

? ? ? ?同源是指春宣，域名酵颁，協(xié)議，端口均相同

http://www.123.com/index.html 調(diào)用 http://www.123.com/server.PHP（非跨域）

http://www.123.com/index.html 調(diào)用 http://www.456.com/server.php （主域名不同:123/456月帝，跨域）

http://abc.123.com/index.html 調(diào)用 http://def.123.com/server.php （子域名不同:abc/def躏惋，跨域）

http://www.123.com:8080/index.html 調(diào)用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）

http://www.123.com/index.html 調(diào)用 https://www.123.com/server.php （協(xié)議不同:http/https嚷辅，跨域）

請注意：localhost和127.0.0.1雖然都指向本機簿姨，但也屬于跨域。

? ? ? ? ? ?瀏覽器執(zhí)行javascript腳本時潦蝇，會檢查這個腳本屬于哪個頁面款熬，如果不是同源頁面，就不會被執(zhí)行攘乒。

二贤牛、解決辦法

1、JSONP

? ? ? ? ? ? 采用JSONP跨域Get 請求是一種常用的方案则酝。但是該方式只支持GET請求殉簸。

? ? ? ? ? ? 那么什么是JSONP呢闰集，它和JSON又有什么不同呢？以下是百度百科上的解釋般卑。

? ? ? ?JSON(JavaScript Object Notation)是一種輕量級的數(shù)據(jù)交換格式武鲁。它基于 JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一個子集。 JSON采用完全獨立于語言的文本格式蝠检，但是也使用了類似于C語言家族的習慣（包括C, C++, C#, Java, JavaScript, Perl, Python等）沐鼠。這些特性使JSON成為理想的數(shù)據(jù)交換語言。易于人閱讀和編寫叹谁，同時也易于機器解析和生成(網(wǎng)絡(luò)傳輸速度快)饲梭。

? ? ? ?JSONP(JSON with Padding)是JSON的 一種“使用模式”，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題焰檩。由于同源策略憔涉，一般來說位于 server1.example.com 的網(wǎng)頁無法與不是 server1.example.com的服務(wù)器溝通，而 HTML 的析苫。 元素是一個例外兜叨。利用 元素的這個開放策略，網(wǎng)頁可以得到從其他來源動態(tài)產(chǎn)生的 JSON 資料衩侥，而這種使用模式就是所謂的 JSONP国旷。用 JSONP 抓到的資料并不是 JSON，而是任意的JavaScript顿乒，用 JavaScript 直譯器執(zhí)行而不是用 JSON 解析器解析议街。

? ? ? ? ? ? 所以，JSONP是一種使用JSON數(shù)據(jù)的方式璧榄，返回的不是JSON對象，是包含JSON對象的javaScript腳本吧雹。Web頁面上調(diào)用js文件時不受是否跨域的影響骨杂，而且擁有”src”這個屬性的標簽都擁有跨域的能力，比如<script>雄卷、<img>搓蚪、<iframe>。所以丁鹉，在進行跨域請求時妒潭， 通過使用html的script標記來進行跨域請求，并在響應(yīng)中返回要執(zhí)行的script代碼揣钦，就直接使用JSON傳遞 javascript對象雳灾。即在跨域的服務(wù)端生成JSON數(shù)據(jù)，然后包裝成script腳本回傳冯凹，從而突破同源策略的限制谎亩，解了跨域訪問的問題。

? ? ? ? ?采用這種方式的問題是不支持POST請求；另外匈庭，JSONP不提供錯誤處理夫凸。如果動態(tài)插入的代碼正常運行，你可以得到返回阱持，但是如果失敗了夭拌，那么什么都不會發(fā)生。

2衷咽、代理

? ? ? ? ? ? 例如www.123.com/index.html需要調(diào)用www.456.com/server.php鸽扁，可以寫一個接口www.123.com/server.php，由這個接口在后端去調(diào)用www.456.com/server.php并拿到返回值兵罢，然后再返回給index.html献烦，這就是一個代理的模式。相當于繞過了瀏覽器端卖词，自然就不存在跨域問題巩那。

3、PHP端修改header(XHR2方式)

? ? ? ? ? ? ? 在php接口腳本中加入以下兩句即可：

? ? ? ? ? ? ?header('Access-Control-Allow-Origin:*');//允許所有來源訪問

? ? ? ? ? ? ?header('Access-Control-Allow-Method:POST,GET');//允許訪問的方式