【node进阶】深度解析express框架---编写接口|解决跨域问题---上篇

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 【node进阶】深度解析express框架---编写接口|解决跨域问题---上篇

学前先知:req.body | req.query | req.params


想要从web的后台中获取接口的数据,传参是必不可少的,后台想要接收前台传来的数据需要借助一些内置的方法:


req.body


express框架中,用req.body接收post客户端的数据,该属性主要用于post()方法时传递参数使用,用法最广泛,在你想使用这个方法的时候必须要导入第三方中间件body-parser.


演示代码:



const express = require('express')
const app = express()
const body_parser = require('body-parser')
app.use(body_parser.urlencoded({extended : false}))
app.post('/user',(req,res)=>{
    console.log(req.body);   //[Object: null prototype] { name: 'james', age: '37', gender: '男' }
    res.send('ok')
})
app.listen(80,()=>{
    console.log('http://127.0.0.1');
})


这里使用了postman测试工具,打印出来的req.body为前台传给后台的参数,后台告诉了前台接收到了参数,打印了ok


req.query


req.query用来获取get方法传递的参数,在这里就无需载入中间件了。


演示代码:



const express = require('express');
const app = express();
// 测试地址:http://127.0.0.1/user/?name=james
app.get('/user', function(req, res){
    let param = req.query.name;  
    console.log(param) //james
  res.send('ok');
});
app.listen(80,()=>{
    console.log('http://127.0.0.1');
})


在postman中测试地址为http://127.0.0.1?name=james,通过req.query取到了一个对象{name : 'james'},随后拿到name属性即可


req.params


有时候我们遇到的地址栏可能会是这种形式:http://127.0.0.1/user/1,这时候就需要我们的req.params去接收前台传来的参数


演示代码:



const express = require('express')
const app = express()
app.get('/user/:id', function(req, res){
    let param = req.params.id;  //1
    console.log(param)
  res.send('ok');
});
app.listen(80,()=>{
    console.log('http://127.0.0.1');
})


在postman中自创地址http://127.0.0.1/user/1,通过req.query获取到一个对象{id:1},随后取出对象中的属性即可


使用express编写接口


  • 创建基本的服务器



const express = require('express')
//创建express实例
const app = express()
//在这里写下你的业务代码...
//调用app.listen 方法,指定端口号并启动web服务器
app.listen('80',()=>{
    console.log('http://127.0.0.1');
})


  • 创建api路由模块



const express = require('express')
const apiRouter = express.Router()
//在这里写下你所创建的路由...
//将apiRouter导出为一个模块
module.exports = apiRouter


将模块导入创建基本服务的文件中



const express = require('express')
const app = express()
const apiRouter = require('./16.apiRouter')
app.use('/api',apiRouter)
app.listen('80',()=>{
    console.log('http://127.0.0.1');
})


  • 编写get接口



apiRouter.get('/get',(req,res)=>{
    // 通过 req.query 获取客户端通过查询字符串,发送到服务器的数据
    const query = req.query
    // 调用 res.send() 方法,向客户端响应处理的结果
    res.send({
        status : 0, // 0 表示处理成功,1 表示处理失败
        msg : 'GET请求成功!',  // 状态的描述
        data : query // 需要响应给客户端的数据
    })
})


  • 编写post接口



apiRouter.post('/post',(req,res)=>{
    // 通过 req.body 获取请求体中包含的 url-encoded 格式的数据
    const body = req.body
    // 调用 res.send() 方法,向客户端响应结果
    res.send({
        status : 0, 
        msg : 'post请求成功!',
        data : body
    })
})


注意:如果要获取 URL-encoded 格式的请求体数据,须配置中间件:app.use(express.urlencoded({ extended: false }))


  • 编写delete接口



// 定义 DELETE 接口
apiRouter.delete('/delete', (req, res) => {
    res.send({
      status: 0,
      msg: 'DELETE请求成功',
    })
  })


跨域问题


什么是跨域


我们刚才编写的接口,存在一个很严重的问题:不支持跨域请求。那么什么是跨域(CORS)呢?


当一个请求url的协议、域名、端口号三者之间任意一个与当前页面url不同即为跨域.

举个例子:我当前的url为:http://127.0.0.1/user,但是我想访问url为https://127.0.0.1/admin中的数据,我能访问的到吗?显然是不可能的,这就产生了跨域问题!


为什么会产生跨域问题


出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。


可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。

所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)。


相关文章
|
10天前
|
JavaScript 前端开发 中间件
探索后端技术:Node.js与Express框架的完美融合
【10月更文挑战第7天】 在当今数字化时代,Web应用已成为日常生活不可或缺的一部分。本文将深入探讨后端技术的两大重要角色——Node.js和Express框架,分析它们如何通过其独特的特性和优势,为现代Web开发提供强大支持。我们将从Node.js的非阻塞I/O和事件驱动机制,到Express框架的简洁路由和中间件特性,全面解析它们的工作原理及应用场景。此外,本文还将分享一些实际开发中的小技巧,帮助你更有效地利用这些技术构建高效、可扩展的Web应用。无论你是刚入门的新手,还是经验丰富的开发者,相信这篇文章都能为你带来新的启发和思考。
|
1月前
|
Web App开发 JavaScript 前端开发
构建高效后端服务:Node.js与Express框架的实战指南
【9月更文挑战第6天】在数字化时代的潮流中,后端开发作为支撑现代Web和移动应用的核心,其重要性不言而喻。本文将深入浅出地介绍如何使用Node.js及其流行的框架Express来搭建一个高效、可扩展的后端服务。通过具体的代码示例和实践技巧,我们将探索如何利用这两个强大的工具提升开发效率和应用性能。无论你是后端开发的新手还是希望提高现有项目质量的老手,这篇文章都将为你提供有价值的见解和指导。
|
2月前
|
JavaScript 前端开发 中间件
构建高效后端服务:Node.js与Express框架的完美搭档
【8月更文挑战第28天】在追求高性能、可扩展和易维护的后端开发领域,Node.js和Express框架的组合提供了一种轻量级且灵活的解决方案。本文将深入探讨如何利用这一组合打造高效的后端服务,并通过实际代码示例展示其实现过程。
|
2月前
|
存储 JavaScript NoSQL
构建高效Web应用:使用Node.js和Express框架
【8月更文挑战第30天】本文将引导你了解如何使用Node.js和Express框架快速搭建一个高效的Web应用。通过实际的代码示例,我们将展示如何创建一个简单的API服务,并讨论如何利用中间件来增强应用功能。无论你是新手还是有经验的开发者,这篇文章都将为你提供有价值的见解。
|
10天前
|
JSON JavaScript 前端开发
Node.js Express 框架
10月更文挑战第7天
19 2
|
18天前
|
Web App开发 JavaScript 前端开发
使用Node.js和Express框架构建Web服务器
使用Node.js和Express框架构建Web服务器
|
19天前
|
Web App开发 JavaScript API
构建高效后端系统:Node.js与Express框架的实践之路
【9月更文挑战第37天】在数字化时代的浪潮中,后端开发作为技术架构的核心,承载着数据处理和业务逻辑的重要职责。本文将深入探讨如何利用Node.js及其强大的Express框架来搭建一个高效、可扩展的后端系统。我们将从基础概念讲起,逐步引导读者理解并实践如何设计、开发和维护一个高性能的后端服务。通过实际代码示例和清晰的步骤说明,本文旨在为初学者和有经验的开发者提供一个全面的指南,帮助他们在后端开发的旅途上走得更远。
37 3
|
28天前
|
Web App开发 JavaScript 前端开发
构建高效Web应用:Node.js与Express框架的深度整合
【9月更文挑战第28天】在现代Web开发领域,Node.js和Express框架的结合已成为打造高性能、易扩展应用的黄金组合。本文将深入探讨如何利用这一技术栈优化Web应用架构,提供具体实践指导,并分析其性能提升的内在机制。通过代码示例,我们将展示从基础搭建到高级功能的实现过程,旨在为开发者提供一条清晰的学习路径,以实现技术升级和项目效率的双重提升。
40 3
|
5天前
|
缓存 资源调度 JavaScript
npx与npm的差异解析,以及包管理器yarn与Node版本管理工具nvm的使用方法详解
npx与npm的差异解析,以及包管理器yarn与Node版本管理工具nvm的使用方法详解
13 0
|
1月前
|
前端开发 JavaScript 安全
node登陆接口权限配置cookie-parser、express-session
本文介绍了在Node.js中使用express-session和cookie-parser实现登录接口的权限配置,包括验证码接口的生成和自定义中间件的创建,用于验证用户权限。
20 0
node登陆接口权限配置cookie-parser、express-session

推荐镜像

更多