JSONP 在前端的发送和后台node.js的处理
来源:互联网 发布:苹果日历群发软件 编辑:程序博客网 时间:2024/06/01 09:09
最近做一个模块,前端用的是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 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) } }) })}// 数据拼接到urlfunction 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传递
- JSONP 在前端的发送和后台node.js的处理
- 简单的ajax前端与node.js后台交互
- node.js的express实现jsonp
- 在node.js下浅谈前端下载文件的方法
- jsonp 前端和后端的结合
- 如何封装Node.js和前端通用的模块
- 如何封装Node.js和前端通用的模块
- 使用 browserify 创建 node服务端和前端共通的js
- 简单的ajax让前端jquery与后台node.js交互
- 前端js和后台配合构建树的方式
- node.js下express的AJAX通讯:jsonp,json
- node.js下express的AJAX通讯:jsonp,json
- 在浏览器和node中使用 GitHub的js-xlsx库进行Excel文件处理(一)
- web前端js跨域的两种实现方式jsonp和src
- 基于Node.js的微服务后台
- Node.js 来构建前端的环境
- 获取前端数据,后台的处理
- 前端、后台和连接前端后台的网络数据传输
- 两个List比较内容是否一样
- JavaScript跨域与解决方案详解
- 联想ThinkPad系列笔记本进bios设置u盘启动教程
- 业余草推荐一款局域网(内网)穿透工具lanproxy
- Altium Designer 导入Arduino UNO PCB
- JSONP 在前端的发送和后台node.js的处理
- HDU 1160 FatMouse's Speed
- 用量子计算辅助深度学习:研究者提出量子辅助Helmholtz机
- Django之URL的命名空间和命名模式
- android 布局绘制流程解析
- 汉字转拼音函数SQLSERVER数据库
- 人脸检测数据集评价代码FDDB evaluation运行方法
- extjs6-modern Ext.field.Select 弹出框的上方按钮 汉化
- 同时装了Python3和Python2,怎么运行.py及pip