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