美文网首页
Js请求跨域问题

Js请求跨域问题

作者: 老衲灬 | 来源:发表于2018-08-19 21:27 被阅读14次

一、请求跨域问题概述

跨域:指的是协议名、端口或者域名不一致的情况都是跨域。

同源策略:Js只能请求同域名下的资源(浏览器限制接收非本域名下的一切资源)

二、跨域问题的解决方案

1、同域代理
2、jsonp方式
原理:

使用示例:
html代码:

<body>
    <input type="button" id="btn" value="按钮">
</body>
<script>
    function fn(data){
        var d = JSON.parse(data);
        console.log(d);
    }
    document.getElementById('btn').onclick = function () {
        //创建script标签
        var sc = document.createElement('script');
        sc.src = "./test.php?callback=fn&url=http://www.blog.com/blog.php";
        sc.id='sc_id';
        //将script标签添加到head标签下
        //添加一次标签,函数被调用一次
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(sc);
        //删除添加的script标签
        var script = document.getElementById('sc_id');
        head.removeChild(script);
    }
</script>

php代码:

$dataGet = file_get_contents($_GET["url"]);
$data = json_encode($dataGet);
echo "{$_GET['callback']}('{$data}')";
3、跨域资源共享(CORS)机制

相关文章

网友评论

      本文标题:Js请求跨域问题

      本文链接:https://www.haomeiwen.com/subject/czdhiftx.html