1.自定义路由模块
const express=require('express')
const router=express.Router()
// 挂载对应的路由
router.get('/get',(req,res)=>{
// 通过req.query获取客户端通过查询字符串,发送到服务器的数据
const query=req.query
// 调用res.send()方法,向客户端响应处理的结果
res.send({
status:0, // 0表示处理成功,1表示处理失败
msg:'GET 请求成功', //状态的描述
data:query // 需要响应给客户端的数据
})
})
// 定义post接口
router.post('/post',(req,res)=>{
//通过req.body获取请求体中包含的url-encoded格式的数据
const body=req.body
//调用res.send()向客户端响应结果
res.send({
status:0,
msg:'post 请求成功',
data:body
})
})
module.exports=router
2.将路由注册到服务器实例上
1.并且引入cors中间件注册到服务器实例上,解决跨域问题
2.将自定义路由模块挂载到服务器上,/api请求
3.express.urlencoded({extends:false}
解析表单中间件
// 导入express
const express=require('express')
// 创建服务实例
const app=express()
// 配置解析表单数据的中间件
app.use(express.urlencoded({extends:false}))
// 一定要在路由之前,配置cors这个中间件,从而解决接口跨域问题
const cors=require('cors')
app.use(cors)
// 导入路由模块
const router=require('./02_apiRouter')
// 把路由模块,注册到app上
app.use('/api',router)
// 启动服务器
app.listen(8080,()=>{
console.log('Express server running st http://127.0.0.1:8080');
})
在导入路由模块前,将cors中间件注册到服务器实例上
// 导入express
const express=require('express')
// 创建服务实例
const app=express()
// 配置解析表单数据的中间件
app.use(express.urlencoded({extends:false}))
// 一定要在路由之前,配置cors这个中间件,从而解决接口跨域问题
const cors=require('cors')
app.use(cors)
// 导入路由模块
const router=require('./02_apiRouter')
// 把路由模块,注册到app上
app.use('/api',router)
// 启动服务器
app.listen(8080,()=>{
console.log('Express server running st http://127.0.0.1:8080');
})
cors介绍:
1.Access-Control-Allow-Origin
允许那些网站能够请求
2.限制客户端发送过来的请求头:Access-Control-Allow-Headers
客户端发送请求过来,不能发送额外的请求头信息,因为CORS设定好了,除非在服务端对 Access-Control-Allow-Headers 进行声明
3.限制请求方式:Access-Control-Allow-Methods
4.简单请求
5.预检请求
就是对CORS默认的放行资源之外的请求就叫预检请求
1.概念:
JSONP是一个跨域解决方案,目的是跨域请求JSON数据,因为JSON数据是不能跨域请求的,但是我们js跨域请求js脚本是可以的,可以把数据封装成一个js语句,做一个方法的调用。跨域请求js脚本即可获取数据
注意事项:
2.实践,实现JSONP接口的步骤:
代码:
// 导入express
const express=require('express')
// 创建服务实例
const app=express()
// 配置解析表单数据的中间件
app.use(express.urlencoded({extends:false}))
// 配置json接口(必须在配置cors中间件前配置jsonp接口)
app.get('/api/jsonp',(req,res)=>{
// 1.得到回调函数的名称
const funcName=req.query.callback
// 2.定义要发送到客户端的数据对象(回调的数据)
const data={ name: 'zs', age: 22 }
// 3.拼接出函数调用的字符串(请求的名称+数据)
const scriptStr = `${funcName}(${JSON.stringify(data)})`
// 4.把拼接的字符串响应给客户端
res.send(scriptStr)
})
// 一定要在路由之前,配置cors这个中间件,从而解决接口跨域问题
const cors=require('cors')
app.use(cors)
// 导入路由模块
const router=require('./02_apiRouter')
// 把路由模块,注册到app上
app.use('/api',router)
// 启动服务器
app.listen(8080,()=>{
console.log('Express server running st http://127.0.0.1:8080');
})
网页:
DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js">script>
head>
<body>
<button id="btnget">getbutton>
<button id="btnpost">postbutton>
<button id="btndelete">deletebutton>
<button id="btnJSONP">jsonpbutton>
<script>
$(function(){
// 1.测试get接口
$('#btnget').on('click',function(){
$.ajax({
type:'GET',
uel:'http://127.0.0.1/api/get',
data:{name:'cc',age:18},
success:function(res){
console.log(res);
}
})
})
// 2.测试delete接口
$('#btndelete').on('click',function(){
$.ajax({
type:'DELETE',
uel:'http://127.0.0.1/api/delete',
data:{name:'cc',age:18},
success:function(res){
console.log(res);
}
})
})
$('#btnJSONP').on('click',function(){
$.ajax({
type: 'GET',
url: 'http://127.0.0.1/api/jsonp',
dataType: 'jsonp',
success: function(res){
console.log(res)
},
})
})
// 2.测试post接口
// $('#btnpost').on('click',function(){
// $.ajax({
// type:'POST',
// uel:'http://127.0.0.1/api/post',
// data:{bookname:'水浒传',author:'施耐庵'},
// success:function(res){
// console.log(res);
// }
// })
// })
})
script>
body>
html>
测试发现得到回调后服务端所发来的数据