【node.js从入门到精通】编写接口，使用CROS解决跨域问题，jsonp的接口
目录
编辑
前言
1. get接口
2.post接口
2.跨域问题
1.CROS是什么
2.使用CROS解决跨域问题
3.CORS请求的分类
4.编写jsonp的接口
写在最后
前言
接口是前后端的一座桥梁。接口是后端设计的一套供给第三方使用的方法。(第三方指前端/后端)接口通过网络协议来调用，最常用的协议是HTTP协议。在定义一个接口时，会写好接口路径和接口方法名的映射，然后前端通过接口路径来调用方法，接下来就看看什么是接口。
1. get接口
●模块的封装，将封装好的模块通过module.exports进行向外暴露，是其他的可以使用该路由模块
const express = require('express');
const router = express.Router();
// 挂载对应路由模块
router.get('/get', (req, res) => {const query = req.query;// 调用send方法向客户端响应处理结果res.send({status: 0, //0=成功，1=失败masg: 'Get请求成功', // 状态描述data: query // 响应给客户端})
})
module.exports = router;●将封装好的模块进行导入
const express = require('express')
const app = express()
// 导入路由模块
const router = require('./02.apiRouter')
// 挂载路由模块到app上面
app.use('/api', router);app.listen(80, () => {console.log('express server running at http://127.0.0.1');
})测试get接口
$('#btnGET').on('click', function () {// 测试GET接口$.ajax({type: 'GET',url: 'http://127.0.0.2/api/get',data: { name: 'ss', age: 12 },success: function (res) {console.log(res);},})})
2.post接口
router.post('/post', (req, res) => {const body = req.body// 调用send方法向客户端响应处理结果res.send({status: 0,msg: 'POST请求成功！',data: 'body'})
})测试post接口
$('#btnPOST').on('click', function () {// 测试POST接口$.ajax({type: 'POST',url: 'http://127.0.0.2/api/get',data: { name: 'ss', age: 12 },success: function (res) {console.log(res);},})})
不要忘记配置一下这个中间件在另一个文件里
2.跨域问题
GET和POST接口，存在一个很严重的问题:不支持跨域请求。
解决接口跨域问题的方案主要有两种：①CORS (推荐使用，都支持) ②JSONP (有缺陷，只支持GET请求)
1.CROS是什么
CORS (Cross-Origin Resource Sharing,跨域资源共享)由一系列HTTP响应头组成，这些HTTP响应头决定浏览器是否阻止前端JS代码跨域获取资源。 浏览器的同源安全策略默认会阻止网页“跨域”获取资源。但如果接口服务器配置了CORS相关的HTTP响应头, 就可以解除浏览器端的跨域访问限制。
2.使用CROS解决跨域问题
第一步:npm i cors 安装cors中间件
第二步：const cors require('cors') 导入中间件
第三步：调用app.use(cors()) 配置中间件（在路由之前调用）
3.CORS请求的分类
客户端在请求CORS接口时，根据请求方式和请求头的不同，可以将CORS的请求分为两大类
①简单请求 ②预检请求
简单请求:
①请求方式: GET. POST、 HEAD三者之一 ②HTTP 头部信息不超过以下几种字段:无自定义头部字段、Accept. Accept-Language、 Content-Language、 DPR、 Downlink、Save-Data、 Viewport-Width、 Width 、Content-Type (只有三个值application/x-www-form- urlencoded、multipart/form-data、 text/plain)
预检请求:
①请求方式为 GET、POST、HEAD 之外的请求Method类型 ②请求头中包含自定义头部字段 ③向服务器发送 了application/jison 格式的数据
特点：
简单请求的特点:客户端与服务器之间只会发生一次请求。 预检请求的特点:客户端与服务器之间会发生两次请求，OPTION预检请求成功之后，才会发起真正的请求。
4.编写jsonp的接口
如果已经配置了CORS跨域资源共享,为了防止冲突,必须在配置CORS中间件之前声明JSONP的接口。否则JSONP接口会被处理成开启了CORS的接口。
配置jsonp接口，由于jsonp没有在router中所以得加上‘/api’
// jsonp接口必须配置到cors之前
app.get('/api/jsonp', (req, res) => {// 定义jsonp接口// 获得函数名const funcName = req.query.callback;// 定义要发送到客户端的数据对象const data = { name: 'qw', age: 12 }// 拼接一个函数调用const scriptStr = `${funcName}(${JSON.stringify(data)})`// 把所拼接的字符串响应给客户端res.send(scriptStr)
})2.绑定事件按钮
// 为jsonp事件绑定按钮$(`#btnJSONP`).on('click', function () {$.ajax({type: 'GET',url: 'http://127.0.0.1',dataType: 'jsopn',success: function (res) {console.log(res);}})})
【node.js从入门到精通】编写接口，使用CROS解决跨域问题，jsonp的接口相关推荐
- 【vue.js开发】如何在vue里面优雅的解决跨域，路由冲突问题
[vue.js开发]如何在vue里面优雅的解决跨域,路由冲突问题 当我们在路由里面配置成以下代理可以解决跨域问题 proxyTable: {'/goods/*': {target: 'http://l ...
- axios get怎么还会显示跨域_react+axios用node代理解决跨域
今天自己搭了个react架子,网上找了个公开的接口,结果发现跨域了.因为接口是别人的,我没法让别人在接口上处理跨域问题,而且这个接口是post请求方式,也没发用jsop处理跨域. 一.前端处理跨域 1 ...
- 前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
#[2022.3]尚硅谷Vue.js从入门到精通基础笔记(理论+实操+知识点速查) 前言 本文完全基于 参考资料:加工整理而成,包括其代码,案例,资源等.前置知识是学习尚硅谷的视频教程,本文配合其教程 ...
- Node.js核心入门（二）
目录: Node.js核心入门(一) 全局对象 常用工具 事件机制 Node.js核心入门(二) 文件系统访问 HTTP服务器与客户端 文件系统 fs fs 模块是文件操作的封装,它提供了文件的读取. ...
- js 移动端 滑块验证码插件_VUE技术详解，Vue.js从入门到精通
[Vue.js简介] Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue采用自底向上增量开发的设计.Vue的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...
- 54 Node.js快速入门
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.Node开发概述 1.1 为什么要学习服务器端开发基础 能够与后端程序员更加紧密的配合 ...
- 万字长文--详解Node.js(快速入门)
Node.js基础与扩展 Node.js 1.初识Node.js与内置模块 1.1 Node.js初识 1.2 fs文件系统模块 1.3 path路径模块 1.4 http模块 2.模块化 2.1 模 ...
- 【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
- Node.js开发入门—使用jade模板引擎
在"Node.js开发入门--Express安装与使用"里,我们曾经使用express generator创建了一个HelloExpress网站,express工具为我们生成了基本 ...
最新文章
- python中关于sqlite3数据库更新数据的使用
- 智慧停车介绍、产业链市场全透析
- 解决 WordPress“正在执行例行维护，请一分钟后回来”
- Tomcat Servlet学习
- j2se学习中的一些零碎知识点2之基础知识
- STM32 基础系列教程 21 - NVIC
- Spark 1.4新特性概述
- UidGenerator：百度开源的分布式ID服务（解决了时钟回拨问题）
- 如何用二进制表示一个小数
- 深圳办理cdn经营许可证_深圳危化品经营许可证申请流程怎么申请？办理危化学品经营许可证...
- 影响PoE交换机不稳定的因素
- P2P 漏洞曝光，数以百万计的物联网设备被入侵！
- Intel CPU 易受新型的 SGAxe 和 CrossTalk 侧信道攻击
- Dij_heap__前向星。
- Java实例（1）BMI计算
- 鹏业安装算量复制工程量
- 2020年下半年系统架构设计师下午真题及答案解析
- excel公式编辑器_让同事看傻，用Excel制作 “抽奖”小软件
- 工作中提升效率的工具
- 电脑右键新建，少了office的几个图标，如：excel,word
热门文章