复习之跨域

同源策略：域名，协议，端口号都相同，是为了网站的安全，所有的网站都是基于同源策略的，不相同进行访问就要跨域，不解决就会报错

跨域：

因为一个大型的网站一般有很多个小网站构成的，所以需要跨域来访问数据,不能一个接口这个网站可以用另外的不能用。

baidu.com

tieba.baidu.com

 mp3.baidu.com

 news.baidu.com

报错：Access to XMLHttpRequest at 'http://localhost/2106/day28/php/01.php?' from origin 'http://127.0.0.1' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

跨域问题的解决方案

 1 CORS 后端设定指定的一些网站来访问接口，获取允许所有网站来访问接口

header('Access-Control-Allow-Origin: *');

header('Access-Control-Allow-Origin: http://192.168.61.79');

2 jsonp 后端返回的是一个函数调用，由前端来定义这个函数

jsonp只能处理get请求

 

src属性并不受同源策略的影响 

<script>

        // jsonp   json作为参数放在回调函数里面

        const oScript = document.createElement('script');
        oScript.src = 'http://localhost/2106/day28/php/02jsonp.php?username=yy&userpwd=123';
        document.body.appendChild(oScript);

        function cb(data) {
            console.log(data);
        }
    </script>

后端写法

<?php
    $uname = $_GET['username'];
    $upwd = $_GET['userpwd'];
    $obj = ['uname' => $uname , 'upwd' => $upwd , 'msg' => '我收到了前端的数据']; 
    $obj = json_encode($obj);

    echo "cb('$obj')";

 

<?php
    // * 表示允许任何网站访问此接口
    // header('Access-Control-Allow-Origin: *');
    // 允许指定的地址访问此接口
    header('Access-Control-Allow-Origin: http://127.0.0.1');
    header('Access-Control-Allow-Origin: http://192.168.61.79');
    echo 'hello';

 用jsonp模拟百度一下

首先后端给了一个接口为

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=前端

 

 

把这个接口放在浏览器里面一看是一个jsonp的接口因为有函数调用 baidu是一个对象 sug是这个对象里面的一个函数

window.baidu.sug({q:"前端",p:false,s:["前端","前端开发","前端开发培训机构推荐","前端培训费用大概多少","前端开发需要学什么","前端开发培训机构哪个比较好","前端程序员","前端开发前景怎么样啊","前端好学吗","前端开发工程师"]});

 

看到了这个接口，前端应该写一个src 之后，再定义一个百度对象，再定以一个sug方法来接受数据

 <input type="text" id="wd">
    <button id="btn">百度一下</button>
    <div class="box"></div>
    <script>

        const $ = e => document.querySelector(e);


        $('#btn').onclick = function () {
            const wd = $('#wd').value;

            const oScript = document.createElement('script');
            oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + wd;//百度的接口，wd是向后端传递数据，后端根据这个数据给我们相应的数据
            document.body.appendChild(oScript);

        }

        // const wd = 'h5';
        // const oScript = document.createElement('script');
        // oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=前端';
        // document.body.appendChild(oScript);

        var baidu = {
            sug: function (data) {    //创造函数，这个sug可以在浏览器中知道是这个sug用来接受数据
                console.log(data);
                const { s } = data;//结构传过来数据里面的数组

                let html = '';
                s.forEach(val => {
                    html += `<p>
                        <a href="https://www.baidu.com/s?wd=${val}">${val}</a>
                        </p>`
                })
                $('.box').innerHTML = html

            }
        }


    </script>