Node.js Express接口开发教程：GET/POST实现及CORS跨域解决方案

首先，需要搭建基础的Web服务器环境。通过引入Express模块并创建应用实例，可以启动一个监听特定端口的Web服务，使其能够接收来自客户端的网络请求。

//导入express模块
const express =require('rexpress')
//创建express的服务器实例
const app=express()

....

//调用app.listen方法 ，指定端口号并启动web服务器
app.listen(80,function(){
  console.log('server running at http://127.0.0.1');
})

为了管理不同的业务逻辑，建议将API路由单独封装为模块。在Express中，可以使用Router对象创建独立的路由控制器，并在主应用文件中挂载这些路由，实现代码的结构化与解耦。

// apiRouter.js
var express=require('express')  //导入express
var apiRouter=express.Router() //创建路由对象
module.exports=router //向外导出对象
//app.js
const apiRouter=require('./apiRouter')
app.use('api',apiRouter)

GET接口通常用于获取数据。在路由处理函数中，通过req.query对象接收客户端通过URL查询字符串传递的参数，随后利用res.send方法将包含状态码、提示信息及实际数据的JSON对象响应给客户端。

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

POST接口主要用于接收客户端提交的数据。与GET不同，POST请求的数据通常位于请求体中。通过req.body获取解析后的表单或JSON数据，并将其封装在响应对象中返回，状态码0通常代表操作成功。

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

在定义具体路由之前，必须配置用于解析请求体数据的中间件。默认情况下，Express无法直接解析表单提交的数据，因此需要引入express.urlencoded中间件，并设置extended选项为false以启用基础解析功能。

//配置解析表单数据的中间件
app.use(express.urlencoded({extended:false}))

跨域资源共享（CORS）是现代Web开发中解决前后端分离跨域问题的关键技术。当浏览器执行同源策略时，会阻止前端脚本跨域获取资源，而CORS通过服务器端配置特定的HTTP响应头，允许受信任的域名访问资源。

此前编写的GET和POST接口存在一个显著缺陷：默认不支持跨域请求。解决这一问题的方案主要有两种主流方式，分别适用于不同的场景需求。

第一种方案是CORS，即跨域资源共享，这是目前业界推荐的主流解决方案。它通过在服务器端配置响应头来允许跨域访问，兼容性好且支持所有HTTP方法。

第二种方案是JSONP，这是一种有局限性的解决方案，仅支持GET请求。它利用HTML中的script标签不受同源策略限制的特性来实现数据交互，但无法处理POST等非GET请求。
在实际开发中，推荐使用CORS方案来解决跨域问题。Express提供了cors第三方中间件，通过简单的安装和配置步骤，即可快速启用跨域支持，无需手动处理复杂的HTTP头信息。

使用cors中间件解决跨域问题的步骤如下：首先通过npm安装cors包；接着在代码中通过require导入该模块；最后，在定义任何路由之前，调用app.use(cors())将中间件挂载到应用上，从而对所有请求生效。

CORS（Cross-Origin Resource Sharing，跨域资源共享）并非由前端实现，而是由服务器端通过一系列HTTP响应头来控制。这些响应头告知浏览器是否允许前端JavaScript代码跨域获取指定资源。

浏览器的同源安全策略默认会阻止网页进行“跨域”资源请求。然而，如果接口服务器配置了CORS相关的HTTP响应头，浏览器就会解除对前端访问的限制，允许跨域数据交换。

关于CORS的配置，主要工作在服务器端完成。客户端浏览器无需进行任何额外配置，只要服务器开启了CORS支持，浏览器即可自动处理相关的预检和请求过程。
需要注意的是，CORS在不同浏览器中的兼容性存在差异。虽然现代主流浏览器均支持CORS，但在旧版浏览器中可能存在兼容性问题，开发时需留意目标用户群体的浏览器版本。
当客户端请求CORS接口时，根据请求方式和请求头的不同，跨域请求被分为两大类：简单请求和预检请求。这种分类决定了浏览器与服务器之间的交互次数和流程。

简单请求是指请求方式仅为GET、POST或HEAD之一，且HTTP头部信息不包含自定义字段，仅包含Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width和Content-Type等标准字段。

预检请求则适用于更复杂的场景，包括：请求方式为GET、POST、HEAD之外的其他HTTP方法（如PUT、DELETE）；请求头中包含自定义字段；或者向服务器发送了application/json格式的数据。

对于预检请求，浏览器会在发送实际请求之前，先发送一个OPTIONS请求进行预检。服务器成功响应预检请求后，浏览器才会发起真正的请求并携带真实数据，这一机制确保了跨域操作的安全性。

简单请求与预检请求的主要区别在于交互次数。简单请求中，客户端与服务器之间仅发生一次请求交互；而预检请求中，客户端与服务器之间会发生两次请求，即先进行OPTION预检，成功后再发起实际请求。

JSONP（JSON with Padding）是一种利用script标签特性实现跨域数据获取的技术。它不属于真正的Ajax请求，因为并未使用XMLHttpRequest对象，而是通过动态创建script标签来加载远程脚本。

JSONP的特点在于其局限性：它仅支持GET请求，不支持POST、PUT、DELETE等其他HTTP方法。此外，JSONP的实现依赖于服务器端配合返回特定的函数调用格式数据。
在项目中同时使用CORS和JSONP时，需注意配置顺序。如果已配置CORS中间件，为防止冲突，必须在配置CORS之前声明JSONP接口。否则，JSONP请求可能会被CORS中间件错误处理，导致功能失效。

实现JSONP接口的步骤包括：首先从客户端请求中获取回调函数的名字；其次，准备要通过JSONP形式发送给客户端的数据，并转换为JSON字符串；接着，根据回调函数名和数据拼接出一个函数调用的字符串；最后，将该字符串响应给客户端，由script标签解析执行。

以下是实现JSONP接口的具体代码示例。在Express路由中，通过req.query.callback获取回调名，构造包含数据的JSON字符串，并使用模板字符串拼接成函数调用格式，最终通过res.send返回给客户端。

简单请求
- 在网页端使用jQuery发起JSONP请求时，需调用$.ajax方法，并配置dataType为“jsonp”。通过指定URL和回调函数，即可发起JSONP请求，并在success回调中处理返回的数据。
- 本文介绍了Node.js使用Express编写接口的核心内容，包括基础路由、数据解析及跨域处理。更多相关Node.js使用express写接口内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
预检请求
- 请求Method类型为GET、POST、HEAD之外的类型
- 请求头包含自定义头部字段
- 向服务器发送application/json格式的数据

浏览器在正式通信前发送OPTION请求进行预检以获取是否允许该实际请求，此次OPTION请求为“预检请求”，服务器成功响应预检请求后，才会发送真正的请求并携带真实数据

简单请求和预检请求的区别

简单请求特点：客户端与服务器之间只会发生一次请求；预检请求特点：客户端与服务器之间会发生两次请求，OPTION预检请求成功之后，才会发起真正的请求

JSONP接口

回顾jsonp的概念和特点

概念：浏览器通过/

特点：

JSONP不属于真正的ajax请求，因为它没有使用XMLHttpRequest这个对象
JSONP仅支持GET请求，不支持POST,PUT,DELETE等请求

创建jsonp接口的注意事项

如果项目中已经配置了CROS的跨域资源共享，为了防止冲突，必须在配置CROS中间件之前声明JSONP的接口，否则JSONP接口会被处理成开启了CROS的接口

实现JSONP接口的步骤

获取客户端的发送过来的回调函数的名字
得到要通过JSONP形式发送给客户端的数据 JSON.stringify()
根据前面两走的到的数据，拼接出一个函数调用的字符串
把上一步拼接得到的字符串，响应给客户端的/

实现JSONP接口的具体代码

app.get('/api/jsonp',(req,res)=>{
  //获取客户端发送过来的回调函数的名字
  const  funcName=req.query.callback
  //得到要通过JSONP形式发送给客户端的数据
  const data={name:'zs',age:22}
  //根据前面两步得到的数据，拼接一个函数调用的字符串
  const scriptStr=`${funcName}(${JSON.stringify(data)})`
  //把上一步得到的拼接字符串，响应给客户端的<script>标签进行解析
  res.send(scriptStr)
})

在网页在使用jq发起jsonp请求

调用$.ajax()，提供JSONP的配置请求，从而发起JSONP请求

$("#btnJSONP").on("click", function () {
    $.ajax({
        type: "GET",
        url: "http://127.0.0.1/api/jsonp",
        dataType: "jsonp",
        success: function (res) {
        console.log(res);
        },
    });
});

到此这篇关于Node.js使用express写接口的文章就介绍到这了,更多相关Node.js使用express写接口内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

Node.js Express接口开发：从基础路由到CORS与JSONP跨域处理