常见的解决跨域的方法总结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