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

相关推荐
掘金安东尼15 分钟前
前端周刊第421期(2025年7月1日–7月6日)
前端·面试·github
摸鱼仙人~18 分钟前
深入理解 classnames:React 动态类名管理的最佳实践
前端·react.js·前端框架
未来之窗软件服务20 分钟前
chrome webdrive异常处理-session not created falled opening key——仙盟创梦IDE
前端·人工智能·chrome·仙盟创梦ide·东方仙盟·数据调式
kymjs张涛20 分钟前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
玲小珑24 分钟前
Next.js 教程系列(十)getStaticPaths 与动态路由的静态生成
前端·next.js
天天鸭30 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
蓝婷儿34 分钟前
每天一个前端小知识 Day 23 - PWA 渐进式 Web 应用开发
前端
无奈何杨44 分钟前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端
恋猫de小郭1 小时前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter
江城开朗的豌豆1 小时前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js