js 跨域訪問

js跨域問題網上可以搜索到很多，以下是我了解學習過程中的整理。

一、什么是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另一個采用的換回地址，這樣域名就不一樣了，此時就會訪問失敗。並且打開瀏覽器控制台會看到提示：

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

二、跨域解決辦法

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');

二、利用標簽的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