JSONP 在前端的发送和后台node.js的处理

最近做一个模块，前端用的是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: 'example@163.com', 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请求：

前端发送jsonp请求，我使用了GitHub中的：

https://github.com/webmodules/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 functi
4000
ons 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传递