最近做一個模組，前端用的是vue,後臺用的是node.js，由於涉及到跨域，所以選擇用JSONP進行前後臺互動，講一下自己的心得體會：

（1）後臺node.js  後臺node.js接收jsonp請求並返回資料非常簡單：

var express = require('express');
var router = express.Router();

router.get('/getinfo', function(req, res, next) {
  // 這一步JSONP必備
  var _callback = req.query.callback;
  // 這個responseData是後臺要傳回給前臺的資料
 

  var responseData = { email: '[email protected]', name: 'jaxu' };
  if (_callback){
      // 這兩步設定傳送也是NODE.JS傳送JSONP必備
      res.type('text/javascript');
      res.send(_callback + '(' + JSON.stringify(responseData) + ')');
  }
  else{
      res.json(responseData);
  }
});

module.exports = router;
 

（2） 前端向後臺傳送jsonp請求：

API
jsonp(url, opts, fn)

url (String) url to fetch
opts (Object), optional
param (String) name of the query string parameter to specify the callback (defaults to callback)
timeout (Number) how long after a timeout error is emitted. 0 to disable (defaults to 60000)
prefix (String) prefix for the global callback functions that handle jsonp responses (defaults to __jp)
name (String) name of the global callback functions that handle jsonp responses (defaults to prefix + incremented counter)
fn callback

在 vue中安裝好這個庫後，由於我向後端傳送請求是一般帶上資料傳送的，所以要把資料作為引數拼接到url中，所以要重新建立一個方法，在這方法中拼接傳送資料到url，再通過上面的jsonp方法傳送：

import originJSONP from 'jsonp'

// 寫一個獲取jsonp資料的方法
export default function jsonp (url, data, option) {
  url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
  return new Promise((resolve, reject) => {
    originJSONP(url, option, (err, data) => {
      if (!err) {
        resolve(data)
      } else {
        reject(err)
      }
    })
  })
}
// 資料拼接到url
function param (data) {
  let url = ''
  for (let k in data) {
    let value = data[k] !== undefined ? data[k] : ''
    url += `&${k}=${encodeURIComponent(value)}`
  }
  return url ? url.substring(1) : ''
}

實際傳送時使用這個方法：

// data為向後臺傳送的資料
export function getContact(data) {
  const url = '傳送地址'

  const options = {
     param: 'callback'
  }
  return jsonp(url, data, options)
}

這樣就實現了前後端的jsonp傳遞