node 第七天 手写前后端jsonp(一个古老的绕过跨域的方法)

  1. 前言
    jsonp并没有解决跨域, 而是绕过跨域去达成目的, 解决跨域的方法只有一种: 后端设置cors
  2. 基础模式
    前端请求接口, 告诉后端函数名(函数要先在前端定义)
html 复制代码
  <script>
    function getUserInfo(obj) {
      console.log(obj);
    }
  </script>
  <script src="http://127.0.0.1:3005/jsonp.js?fn=getUserInfo"></script>
  1. jsonp封装
    通过动态创建script标签, 给window挂一个全局函数, 然后在该函数的回调中取到后端数据
html 复制代码
  <script>
    function jsonp(url, queryData, success) {
      let fn = 'fn' + Date.now();
      let queryStr = Object.entries(queryData)
        .map(([key, val]) => {
          return key + '=' + val;
        })
        .join('&');
      const scriptEl = document.createElement('script');
      scriptEl.src = url + '?' + queryStr + '&fn=' + fn;
      const headEl = document.querySelector('head');
      headEl.appendChild(scriptEl);
      window[fn] = data => {
        success(data);
        delete window[fn];
        headEl.removeChild(scriptEl);
      };
    }
  </script>
  <script>
    function getUserInfo(obj) {
      console.log(obj);
    }
    jsonp(
      'http://127.0.0.1:3005/jsonp.js',
      {
        user: 'jian'
      },
      getUserInfo
    );
  </script>
  1. node后端部分(后端解决跨域的部分可省略)
js 复制代码
const http = require('http');
const fs = require('fs');
const path = require('path');
const url = require('url');

const server = http.createServer((req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  res.setHeader('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, DELETE');
  if (req.method === 'OPTIONS') {
    res.writeHead(200);
    res.end();
  } else if (/^\/jsonp.*/.test(req.url)) {
    let { query } = url.parse(req.url, true);
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    let result = JSON.stringify({ id: 1, name: '张三' });
    setTimeout(() => {
      res.end(`${query.fn}(${result})`);
    }, 2000);
  }
});
server.listen(3005);

jsonp解决跨域问题, 到现在已经是古老的洪水猛兽, 就像声明变量关键字var一样

相关推荐
前端小趴菜0518 分钟前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~1 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.2 小时前
serviceWorker缓存资源
前端
RadiumAg3 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo3 小时前
ES6笔记2
开发语言·前端·javascript
yanlele3 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子4 小时前
React状态管理最佳实践
前端
烛阴5 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子5 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...5 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts