【前端面試】JS如何實(shí)現(xiàn)跨域

程序猿 2021-03-31 19:56:02 1993瀏覽 加載中

對(duì)于端口和協(xié)議的不同,只能通過后臺(tái)來解決。我們要解決的是域名不同的問題。

1,下面是用php進(jìn)行的設(shè)置,“*” 號(hào)表示允許任何域向我們的服務(wù)端提交請(qǐng)求,header({Access-Control-Allow-Origin: *)

2,JSONP(ISON with Padding填充式JSON或參數(shù)式JSON)

在js中,我們雖然不能直接用XML HttpRequest請(qǐng)求不同域上的數(shù)據(jù),但是在頁面上引入不同域上的js腳本文件卻是可以的,jsonp正是利用這個(gè)特性來實(shí)現(xiàn)的。JSONP由兩部分組成:回調(diào)函數(shù)和數(shù)據(jù)?;卣{(diào)函數(shù)是當(dāng)響應(yīng)到來時(shí)應(yīng)該在頁面中調(diào)用的函數(shù),而數(shù)據(jù)就是傳入回調(diào)函數(shù)中的JSON數(shù)據(jù)。

<script type="text/javascript" >
    function dosomething(jsondata){
        //處理獲得的json數(shù)據(jù)
    }
</script>
<script src ="http://example . com/ data. php?callback=dosomething" ></script>

首先第一個(gè)script標(biāo)簽定義了一個(gè)處理數(shù)據(jù)的函數(shù):

然后第二個(gè)script標(biāo)簽載入-個(gè)js 文件,http: //example.com/data.php 是數(shù)據(jù)所在地址,但是因?yàn)槭钱?dāng)做js來引入的,所以http: //example.com/data php返回的必須是一個(gè)能執(zhí)行的js文件;

最后js文件載入成功后會(huì)執(zhí)行我們?cè)趗rl參數(shù)中指定的函數(shù),并且會(huì)把我們需要的json數(shù)據(jù)作為參數(shù)傳入。所以php應(yīng)該是這樣的:

<?php
    $callback = $_ GET['callback”];//得到回調(diào)函數(shù)名
    $data = array('a', 'b','c" );//要返回的數(shù)據(jù)
    echo $callback. "('.json encode($data).")";//輸出
?>


標(biāo)簽: 前端面試 js 跨域
最后修改:2025-04-04 10:26:55

非特殊說明,本博所有文章均為博主原創(chuàng)。

国产免费久久受久久,人妻AV成熟片久久久久久,亚洲综合无码日韩,国产AV无码乱码精品国产 www.sucaiwu.net