常见的解决跨域的方法总结JSONP和设置header头

为什么会出现跨域?
出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)

跨域简单理解就是:当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
比如:bd.com去请求tb.com里面的数据,就会存在跨域问题

这里总结两个我最常用到的解决跨域的方法。逻辑场景:a.com/index.html去请求b.com/p.php里面的数据

一、设置header

1、在b.com/p.php中设置header如下

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

2、a.com/index.html内容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
我是a.com页面,要请求b.com/p.php里面的数据
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $.ajax({
        url:"http://b.com/p.php",
        type:"get",
        data:{"a":555},
        success:function (data) {
            console.log('收到的数据:'+data)
        },
        error:function (data) {
            console.log('错误')
            console.log(data)
        }
    })
</script>
</body>
</html>

这种方式适合自己的站点操作,如果是请求别人的站点,别人也不会允许你跨站请求。。所以不太实用

二、实用JSONP解决跨域

1,b.com/p.php内容如下

<?php
$data = ["name"=>"heiwuge"];
$callback = $_GET['callback'];
echo $callback.'('.json_encode($data).')';

thinkphp框架可以直接写

jsonp($data)

2,a.com/index.html内容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
我是a.com页面,要请求b.com/p.php里面的数据
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $.ajax({
        url:"http://b.com/p.php",
        type:"get",
        dataType:'jsonp',
        data:{"a":555},
        success:function (data) {
            console.log('收到的数据:'+data)
        },
        error:function (data) {
            console.log('错误')
            console.log(data)
        }
    })

</script>
</body>
</html>
© 版权声明
THE END
喜欢就支持一下吧
点赞15
评论 抢沙发

请登录后发表评论

    暂无评论内容