JavaScript跨域問題簡述

JavaScript 跨域問題簡述

一、什麼是跨域?

1.文件所在的服務器的域名,端口號,協議其中之一不同於當前頁面,頁面訪問該服務器文件的過程就稱為跨域。

2.Ajax由於安全性問題沒法跨域訪問文件。

3.實現跨域可以通過src鏈接到需要訪問接口,比如訪問不同域的js、css文件或者圖片,通過對應的script、link、img標簽的src屬性來實現。

二、使用

<script type="text/javascript" src="./cross.js"></script>

2.跨域訪問獲取jsonp數據:

A.jsonp:服務器向前端返回callback(data)形式的js字符串數據,callback是前端的一個函數, data是JSON規范的字符串;

B.jsonp解決跨域問題結合以下代碼:

a.通過script標簽src屬性訪問到不同域服務器裡面的動態頁面,比如cross.php文件,

b.服務器的php運行環境會解析該php文件然後將得到的callback(data)字符串數據返回前端,

c.然後前端會執行callback(data)函數,所以我們隻需要定義一個全局callback(data) 函數便可以解析data數據,;

scross.php

<?php 

$callback = $_GET['jsonp'];
$array = array('name'=>'張三','age'=>18);

echo $callback."(".json_encode($array).")";

?>

cross.html

/* 為什麼callback必須是全局函數?
   1.全局函數意味著callbak函數隻能被script直接包裹,
    a.如果使用自己執行函數(function(){})()包裹,會使得callback成為局部變量
    b.使用window.onload = function(){} 包裹也一樣成為局部變量
    c.jsonp實現跨域src所在的script是直接追加到頁面並且執行,這時候需要調用callback函數
    如果callback是局部函數,那麼將會報錯
*/
<script>
    function callback(data) {
        console.log(data);
    }

    window.onload = function() {

        var script = document.createElement('script');
        script.src = '../testphp/cross.php?jsonp=callback';
        document.body.appendChild(script);

    }
</script>

3.封裝跨域函數:

function crossRegion(jsonp,callback,url){
    /*默認callback的key為‘jsonp’*/
    var jsonp = jsonp || 'jsonp';
    var script = document.createElement('script');
    script.src = url + '?' + jsonp + '='+ callback;
    document.body.appendChild(script);
}

發佈留言