跨域请求解决方案

最新推荐文章于 2025-04-11 11:54:03 发布

「已注销」

最新推荐文章于 2025-04-11 11:54:03 发布

阅读量150

点赞数

文章标签： javascript html5 前端

本文链接：https://blog.youkuaiyun.com/mikkfe/article/details/104934347

版权

浏览器的同源策略

浏览器有个要求，当前页面和要请求的资源，必须得在同一个源内。
同源就是，同协议，同域名，同端口。
如果不同源，浏览器会阻止这次请求，浏览器阻止的！与ajax和http无关。
这个问题叫跨域。
浏览器认为，只要没有明确允许，就是拒绝！
浏览器不允许的跨域，仅仅是针对ajax。

解决跨域请求

该文章的代码运行在服务器环境下

前端的解决方案，不用ajax，用jsonp的方式解决
什么是jsonp？
利用html标签可以跨域的特点，解决跨域问题
利用script标签，引入外部资源，实现跨域请求
第一步：
jsonp.js

var d = "这是js中的数据";

jsonp.txt

var d = "txt";

jsonp.php

<?php
    // print "var a = 'php';";
    // $data = "'这是php要返回的数据'";
    // "var a = '这是php要返回的数据'";
    // echo "var a = ".$data;
    echo "function fn(){console.log('hello php')}";
?>

jsonp.html

<!-- <script src="data/jsonp.js"></script> -->
<!-- <script src="data/jsonp.txt"></script> -->
<script src="data/jsonp.php"></script>
<script>
    // console.log(d);
    // script标签将引入的资源 返回的数据，作为js代码执行了！
    // console.log(d);
    // script标签将引入的资源 返回的数据，作为js代码执行了！
    // console.log(a);
    // console.log(a);
    // 所以引入的文件返回的值会被js解析
    fn();
</script>

第二步：
jasonp2.html

<script>
	// 在这里定义函数fn
    function fn(res){
        // console.log("html");
        
        console.log(res);
    }
    // 函数在执行时，可以发送参数，实参
    // 函数在定义时，可以接受参数，形参
</script>

jsonp2.php

<?php
    $data = "hello";
	// 在这里执行函数fn，对fn进行传参，注意传入的参数是否字符，下面的代码相当与在js中执行的代码为fn('hello')
    echo "fn('". $data ."')";
?>

第三步：
jsonp3.html

    // 有script标签
    // 设置src属性，要请求的跨域地址
    // 在请求的文件中，还需要一个函数等待被请求到的资源返回的函数执行

    // jsonp("",function(){},data);

    document.onclick = function(){
        let url = "http://127.0.0.1/jsonp/data/jsonp3.php";
        jsonp(url,function(res){
            console.log(res);
        },{
            user:"root",
            pass:678
        });
    }

    // 要发送的数据，实在是太丑了，直接在写字符，不好看
    // "user=admin&pass=123"
    // 处理处理，处理成对象，多好看
    // {user:"admin",pass:123}

    function jsonp(url,cb,data){
        // 处理要发送的数据，处理成这种格式："user=admin&pass=123"
        data = data || {};
        let str = "";
        for(var key in data){
            str += `${key}=${data[key]}&`;
        }
        let t = new Date().getTime();
        str = str + "__qft="+t;
        // 创建一个script标签
        var script = document.createElement("script");
        // 设置要请求的资源地址，拼接要发送的数据
        // jsonp只能get方式发送数据，因为只有url在连接后台，没有xhr对象
        script.src = url + "?" + str;
        // 将script标签插入页面
        document.body.appendChild(script);
        // 使用window，在局部声明全局函数，准备被后台返回的数据解析后，执行
        window.fn = function(res){
            cb(res);
        }
    }

isonp3.php

<?php
	// 接收数据
    // $_GET[""];
    $u = $_REQUEST["user"];
    $p = $_REQUEST["pass"];

    $data = "hello 这是php接收到的数据，又还给你了：".$u."---".$p;
    
    echo "fn('".$data."')";
?>

第四步：
jsonp.html

    document.onclick = function(){
        let url = "http://127.0.0.1/jsonp/data/jsonp4.php";
        jsonp(url,function(res){
            console.log(res);
        },{
            user:"root",
            pass:678,
            // 根据后台规定的字段名，随便传个函数名过去，让后台返回值后，能被script解析
            cbn:"zxc",
            // 为了实现前端的封装思想，为了适应后台不断变化的地址，将后台要接受的字段名，传给自己的函数
            fieldName:"cbn"
        });
    }
    function jsonp(url,cb,data){
        data = data || {};
        let str = "";
        for(var key in data){
            str += `${key}=${data[key]}&`;
        }
        let t = new Date().getTime();
        str = str + "__qft="+t;
        var script = document.createElement("script");
        script.src = url + "?" + str;
        document.body.appendChild(script);
        
        var b = data.fieldName;
        var a = data[b];
        window[a] = function(res){
            cb(res);
        }
    }

    // 当对象的属性是变量时，要使用[]语法包裹变量

jasonp.php

<?php

    $u = $_REQUEST["user"];
    $p = $_REQUEST["pass"];
    $cbn = $_REQUEST["cbn"];

    $data = "hello 这是php接收到的数据，又还给你了：".$u."---".$p;
    
    echo $cbn."('".$data."')";

?>

根据以上步骤详细了解了如何用jsonp解决跨域请求问题，可以对其进行封装，方便之后的调用
封装的函数如下：

function jsonp(url,success,data){
    data = data || {};
    let str = "";
    for(var key in data){
        str += `${key}=${data[key]}&`;
    }
    let t = new Date().getTime();
    str = str + "__qft="+t;
    var script = document.createElement("script");
    script.src = url + "?" + str;
    document.body.appendChild(script);
    
    window[data[data.fieldName]] = function(res){
        success(res);
    }
}
// 封装置后的调用形式，如：jsonp(url,success,data)
// url：为支持jsonp跨域的请求地址
// success：请求的表示成功之后，执行的回调函数
// data：要发送给后台的数据，对象形式
	// 其中：
		// fieldName属性保存的是后台接收的 要执行的函数名所在的字段名
		// 根据后台接收的字段名，将随便写的函数名传给后台

后台的解决方案
CORS，服务器代理
CORS的原理：在后台设置，允许所有的来源请求，不会被浏览器阻止
代码如下：

<script src="../ajax.js"></script>
<script>
    document.onclick = function(){
        ajax({
            url:"http://127.0.0.1/CrossDomain/data/data.php",
            success:function(res){
                console.log(res);
            }
        })
    }
</script>

<?php
	// 下面三行代码就是后台的解决方案
    header("Access-Control-Allow-Origin:*");
    header("Access-Control-Request-Methods:GET, POST, PUT, DELETE, OPTIONS");
    header('Access-Control-Allow-Headers:x-requested-with,content-type,test-token,test-sessid');

    echo "允许所有来源访问的资源";
?>