淺析jsopn跨域請求原理及cors（跨域資源共享）的完美解決方法

由于同源策略的緣故，ajax不能向不同域的網(wǎng)站發(fā)出請求。

創(chuàng)新互聯(lián)制作網(wǎng)站網(wǎng)頁找三站合一網(wǎng)站制作公司,專注于網(wǎng)頁設(shè)計,網(wǎng)站制作、成都網(wǎng)站設(shè)計,網(wǎng)站設(shè)計,企業(yè)網(wǎng)站搭建,網(wǎng)站開發(fā),建網(wǎng)站業(yè)務(wù),680元做網(wǎng)站,已為上千多家服務(wù),創(chuàng)新互聯(lián)網(wǎng)站建設(shè)將一如既往的為我們的客戶提供最優(yōu)質(zhì)的網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷推廣服務(wù)!

比如a站localhost需要向b站請求數(shù)據(jù)，地址為：http://www.walk-sing.com/api.php

請求的代碼如下：

訪問該頁面，頁面空白，按F12打開控制臺，可以看到截圖所示信息：

解決方案1：jsonp

我們先來看這樣一個例子：

執(zhí)行結(jié)果：

我們也可以這樣寫：

alertsomething.js的內(nèi)容如下：

alertSomething( 
   {"name":"ben","age":24} 
   ); 

也可以得到截圖所示結(jié)果。

我們再換一個方式，將alertsomething.js上傳到服務(wù)器，將代碼改為如下形式：

也可以得到截圖所示結(jié)果。

不知道大家發(fā)現(xiàn)沒有，script標(biāo)簽沒有同源策略的限制，jsonp正是基于此原理實現(xiàn)的。

jsonp的具體實現(xiàn)可參見如下代碼：

jsonp.php

<?php 
$method = isset($_GET['callback']) ? $_GET['callback'] : ''; 
if(!isset($method)){ 
 exit('bad request'); 
} 
$testArr = array( 
 'name' => 'ben', 
 'age' => 23 
); 
echo $method.'('.json_encode($testArr).')'; 

js代碼：

也可以得到截圖所示結(jié)果。

解決方案二：CORS（跨域資源共享，Cross-Origin Resource Sharing）

不知道大家發(fā)現(xiàn)了沒有，jsonp只能發(fā)送get請求，而如果業(yè)務(wù)中需要用到post請求時，jsonp就無能為力了。

這時候cors（跨域資源共享，Cross-Origin Resource Sharing）就派上用處了。

CORS的原理：

CORS定義一種跨域訪問的機制，可以讓AJAX實現(xiàn)跨域訪問。CORS 允許一個域上的網(wǎng)絡(luò)應(yīng)用向另一個域提交跨域 AJAX 請求。實現(xiàn)此功能非常簡單，只需由服務(wù)器發(fā)送一個響應(yīng)標(biāo)頭即可。
就拿前面第一個例子來說，我只要在api.php文件頭加上如下一句話即可：

header('access-control-allow-origin:*'); 

再次請求該接口，結(jié)果如下截圖所示：

以上所述是小編給大家介紹的jsopn跨域請求原理及cors（跨域資源共享）的完美解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！