美文网首页
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