[JavaScript知识库]JS - 解决跨域的办法 - JSONP【简单实现JSONP】

• 前言

  • 在进行数据请求的时候，可能会因为同源策略的影响，访问数据的时候会出现跨域的情况，此时，我们可以使用JSONP技术，忽略同源策略去访问数据。

• JSONP的优点

  • JSONP不像使用 XMLHttpRequest 对象实现的 【AJAX】 发送请求那样受到同源策略的限制，JSONP可以忽略同源策略的影响。
  • JSONP对浏览器的兼容性处理的更好。

• JSONP的缺点

  • JSONP是使用script标签去发送的请求，因此只能处理get请求，不能处理post以及其他的http请求。
  • JSONP是在发送请求的时候传递了一个接受数据的函数，因此要后端配合去使用。
  • JSONP在发送请求失败的时候，不会返回状态码。
  • JSONP在发送请求的时候安全性能较低，在使用JSONP的时候必须要保证使用的JSONP服务必须是安全可信的。

• JSONP的简单封装

  // 接收数据的函数
  function getData(data) {
  console.log(data, '获取到的数据'); // {username: 'admin', password: 'a123'} '获取到的数据'
  }
  
  // 封装JSONP函数
  function JSONP(obj) {
  // 创建一个 script 标签
  let script = document.createElement('script');
  // 判断是否传递回调函数名称
  if (!obj.callbackName) throw Error('JSONP必须传递回接受数据回调函数名称');
  // 拼接字符串
  let str = `${obj.url}?callback=${obj.callbackName}`;
  // 判断是否传递data 【queryString数据】
  if (obj.data) {
    // 传递了，遍历数据 进行拼接
    for (key in obj.data) {
      str += `&${key}=${obj.data[key]}`;
    }
  }
  // 给script 标签添加src 属性
  script.src = str;
  // 上树标签
  document.body.appendChild(script);
  }
  
  JSONP({
  url: 'http://localhost:3000/login',
  data: {
    color: 'red',
    num: 10,
  },
  callbackName: 'getData',
  });
  

• 简单模拟接口数据

  	// 引入express
  const express = require('express');
  // 注册程序
  const app = express();
  // 创建变量
  const userinfo = {
    username: 'admin',
    password: 'a123',
  };
  // 监听接口
  app.get('/login', (req, res) => {
    // 返回数据
    res.end(`${req.query.callback}(${JSON.stringify(userinfo)})`);
  });
  
  // 监听端口
  app.listen(3000, () => {
    console.log('监听3000');
  });