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一样

相关推荐
言兴3 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte6 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常8 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常9 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
ccc101813 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
engineer_why15 分钟前
【elpis专栏】里程碑一:elpis-core 引擎的理解
node.js
Struggler28120 分钟前
Chrome插件开发
前端
前端 贾公子33 分钟前
Monorepo + vite 怎么热更新
前端
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试