使用node手撕jsonp跨域

時間 2020-03-22

標籤使用 node jsonp 欄目 JSON 简体版

原文原文鏈接

背景

近日遇到了公司喜愛JSONP的後端，聯調時候第一次磨磨蹭蹭沒有進入成功，遇到報錯花了些時間，因而乎本身手寫一遍加深理解吧。javascript

想到一首詩，默寫出來吧

《冬夜讀書示子聿》
    陸游
 古人學問無遺力，
 少壯工夫老始成。
 紙上得來終覺淺，
 絕知此事要躬行。
複製代碼

JS請求部分

實現原理是使用 script link imgsrc數據跨域，約定callback，使用參數傳遞請求的數據。java

const options = {
      callbackName: 'callback'
    }
    function jsonp({ url, params, callback }) {
      return new Promise((resolve, reject) => {
        let script = document.createElement('script');
         params = JSON.parse(JSON.stringify(params));
        const arr = [];
        for (const key in params) {
          arr.push(`${key}=${params[key]}`);
        }
        arr.push(`callback=${callback}`);
        script.src = `${url}?${arr.join('&')}`;
        document.body.append(script);
        window[options.callbackName] = function(data) {
          delete window[options.callbackName];
          resolve(data);
          document.body.removeChild(script);
        };
      });
    }
    jsonp({
      url: 'http://127.0.0.1:7001/jsonp',
      params: {
        word: 'i love you',
      },
      callback: 'callback'
    }).then(data => {
      console.log(data)
    });
複製代碼

Egg.js 實現JSONP

router.js

有jsonp中間件，好處是直接返回json，不須要拼接callback函數調用express

module.exports = app => {
const { router, controller } = app;
const jsonp = app.jsonp();
router.get('/', controller.home.index);
router.get('/jsonp', jsonp, controller.home.jsonpTest);
};
複製代碼

controller

async jsonpTest() {
    const { ctx } = this;
    const {callback,wd} = ctx.query;
    console.log(callback, wd);
    let data = {
      username: 'test',
      password: '123123',
    };
    ctx.body = data;
  }
複製代碼

Express.js

沒有中間件須要拼接callbackjson

const express = require('express')
const app = express()
const port = 3000

var router = express.Router();
app.get('/', (req, res) => res.send('Hello World!'))
app.get('/jsonp', function(req, res, next) {
	let data = {
    username : 'www.fire1024.com',
    password : 123456
  }
  // 調用回調函數 , 並響應
  res.send(`${callback}(${JSON.stringify(data)})`);
})
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
複製代碼