JSONP跨域请求

跨域请求

浏览器默认开启同源策略，请求方与被请求方若存在 协议、域名、端口 任一方面的不同，则请求不被允许

    报错: XMLHttpRequest cannot load xxxxxxx is not allowed by Access-Control-Allow-Origin.

如何实现跨域请求？

• 浏览器中以下标签不会被同源策略限制

    <img src="请求链接">
    <link herf="请求链接"></link>
    <script src="请求链接"></script>

为求语义化，一般使用 <script> 标签发送跨域请求

• 获得响应内容的原理
  • script 请求到的内容会作为JS代码直接执行
  • 只要规定响应内容的格式，即可在 JS 代码中操作响应数据
  • 我们把规范后的响应内容称为 JSONP（JSON with padding）

简单实例

http://localhost/index.html 向 http://127.0.0.1/data.php 发送请求

• 请求方：index.html

    <script>
        function callback(res){
            console.log(res);
        }
    </script>
    <script src="http://127.0.0.1/data.php"></script>

• 响应方：data.php

    <?php
        $str = '{"name" : "hello word!"}';
        $jsonp = "callback($str)";
        echo $jsonp;
    ?>

• 响应数据：
  

应用

一般将此方法封装成工具函数，配合后端接口文档使用

• 将 (url, data, callback_name) 等信息作为参数生成请求 url
• 动态生成对应 script 标签发送请求，并及时动态删除 script 标签
• 在 callback 函数中接收响应数据