js 跨域訪問

js跨域問題網上能夠搜索到不少，如下是我瞭解學習過程當中的整理。

1、什麼是js跨域。

初步瞭解是： 域名a下的js文件，對域名b下的服務器發出請求

如：http://127.0.0.1/index.html 中的js

//定義請求對象
            var xhr = new XMLHttpRequest || new ActiveXObject("Microsoft.XMLHTTP") || new ActiveXObject("msxml2.XMLHTTP");;
            //綁定狀態改變事件 
            xhr.onreadystatechange = function(data){
                if(xhr.readyState == 4)
                {
                    console.log(xhr.responseText);
                }
            }
            xhr.open("POST","http://192.168.1.103/service.php",true);
            xhr.send();

這裏要注意一下：因爲都是在本地測試 若是都用  http://localhost/* 這樣就不是 跨域了，他們至關於在一樣的域名下，只是在不一樣的文件夾中，因此我一個是採用的 計算機的內網ip另外一個採用的換回地址，這樣域名就不同了，此時就會訪問失敗。而且打開瀏覽器控制檯會看到提示：

此時就表示訪問跨域了而且被阻止了。

2、跨域解決辦法

1.首先根據瀏覽器提示來解決 即讓服務器來容許跨域（需服務器配合訪問權限）

因爲ajax是不支持跨域的，因此須要服務器端作訪問配置。

service.php

<?php
    header('Access-Control-Allow-Origin:*');
    echo "success";
?>

這樣就能夠了，可是用*表示容許全部的其餘域js訪問，安全一點的作法是 指定一下

<?php
    header('Access-Control-Allow-Origin:http://127.0.0.1');
    echo "success";
?>

若是要指定多個 就只能這麼實現了

<?php
    $allowAry = array(
        "http://192.168.1.103",
        "http://192.168.1.155"
    );
    $origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';
    if(in_array($allowAry, $origin))
    {
        header('Access-Control-Allow-Origin:{$origin}');
    }
    echo "success";
?>

服務器除了 容許某些域名跨域訪問，還能夠控制跨域訪問的類型和響應頭設置

// 響應類型 
header('Access-Control-Allow-Methods:POST'); 
// 響應頭設置 
header('Access-Control-Allow-Headers:x-requested-with,content-type');

2、利用標籤的src屬性天生的可跨域性質 即 jsonp技術（需服務器配合數據格式）

script標籤的src屬性會載入服務器端的js代碼並執行。那麼咱們只須要在服務端返回一段可執行的js文本便可。

如：

service.php

    if($_REQUEST["a"] == 1)
    {
        echo "loadData('123456');";
    }
    else
    {
        echo "loadData('654321');";
    }

index.html

<script>
function loadData(data)
{
    console.log(data);
}
            
</script>
<script src="http://192.168.1.103/service2/service.php?a=1"></script>

其實這裏至關因而在前端定義了一個函數，而後再從後端載入js代碼並執行，數據當作函數的實參傳遞。

這就須要先後端定義和調用的方法要一致。

jQuery中包含了jsonp技術

$.ajax({
    "dataType":"jsonp",
    "url" : "服務器地址",
    "jsonpCallback" : "fun"//必需要與服務器調用的名字同樣
    "success":function(data){
    console.log(data);
    },
    "error":function(){
    
    }

});

 

 

參考地址：https://www.jb51.net/article/104442.htm