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