九种跨域解决方案使用示例(1)-jsonp

jsonp原理

利用script标签没有跨域限制的漏洞，网页可以从其他来源动态生成的json．

jsonp优缺点

优：兼容性好
缺：仅支持 get 方法

jsonp实现流程

1. 声明一个回调函数(callback)，其函数名当做参数，传给需要跨域访问的服务端，服务端将目标数据当做形参返回给客户端
2. 客户端创建script标签，并在script标签地址上带上?callback=xxx
3. 服务端将传过来的函数名与需要返回的数据进行字符串拼接，如show('helloworld')
4. 客户端声明回调函数的方法，并调用

前端页面：

function createJsonP(url, data, callback) {
      return new Promise((resolve, reject) => {
        // 生成script标签
        let eScript = document.createElement('script');
        const eBody = document.body;
        let params = [];

        window[callback] = function(data) {
          resolve(data);
          // 完成后移除script标签
          eBody.removeChild(eScript);
        };

        eScript.id = new Date().getTime();
        for(let i in data) {
          params.push(`${i}=${data[i]}`);
        }
        params = params.join('&');
        eScript.src = `${url}?${params}&callback=${callback}`;

        // 插入body
        eBody.appendChild(eScript);
      });
    }

    createJsonP('/test', {
      username: 'admin',
      pass: '123',
    }, 'show').then((data) => {
      console.log(data); // 用户名是：admin, 密码是：123
    });

server端（以nodejs为例）：

const express = require('express');

const app = express();

app.get('/test', (req, res) => {
  const {username, pass, callback } = req.query;
  res.end(`${callback}('用户名是：${username}, 密码是：${pass}')`);
});

app.listen(1828);