apirouter.js:
const express=require('express')
//创建web服务器实例
const router=express.Router()
//挂载对应路由
router.get('/get',(req,res)=>{
    res.send({
        status:0,//0表示成功，1表示失败
        msg:'Get请求成功',
        data:req.query
    })
})
//定义post接口
router.post('/post',(req,res)=>{
    res.send({
        status:0,//0表示成功，1表示失败
        msg:'Post请求成功',
        data:req.body
        
    })
})
//定义delete接口
router.delete('/delete',(req,res)=>{
    res.send({  
        status:0,//0表示成功，1表示失败
        msg:'Delete请求成功',
        
    })
})
module.exports=router

Get ,Post,Delete接口

const express=require('express')
//创建web服务器
const app=express()
//导入路由模块
const apirouter=require('./apirouter')
app.use(express.urlencoded({extended:false}))
//在路由之前配置cors中间件,解决跨域问题
const cors=require('cors')
app.use(cors())

//将路由模块注册为全局中间件
app.use('/api',apirouter)
app.listen(80,()=>{
    console.log('运行在http://127.0.0.1')
})

解决接口跨域问题

CORS(主流方案)

JSONP（有缺陷：只支持Get请求）

什么是CORS

CORS(Cross-Origin Resource Sharing,跨域资源共享)，由一系列Http响应头组成，这些Http响应头决定浏览器是否阻止前端JS代码跨域获取资源。

浏览器的同源安全策略默认会阻止网页“跨域”获取资源，但如果接口服务器配置了CORS相关的HTTP响应头，就可以解决浏览器端的跨域访问限制。

浏览器：网页==》跨域请求接口服务器（配置Access-Control-Allow-*相关响应头）

《== 响应

CORS响应头部

Access-Control-Allow-Origin

响应头部可以携带一个Access-Control-Allow-Origin字段，语法如下：

Access-Control-Allow-Origin:|*

其中origin参数指定了允许访问该资源的外域URL

例如：下面字段只允许访问来自http://itcast.cn的请求

res.setHeader(‘Access-Control-Allow-Origin’,’http://itcast.cn')

*通配符表示允许来自任何域的请求

Access-Control-Allow-Headers

默认情况下，CORS仅支持客户端向服务器发送9个请求头：

Accept,Accept-Language,Content-Language,DPR,Downlink,Save-Data,Viewport-Width,Width,Content-Type(仅限于text-plain,multipart/form-data,application/x-www-form-urlencoded三者之一)

如果向服务器发送了额外的请求头信息，则需要在服务器端，通过Access-Control-Allow-Headers对额外的请求头进行声明，否则这次请求会失败

例如，允许客户端向服务器发送Content-Type请求头和X-Custom-Header请求头

res.setHeader(‘Access-Control-Allow-Header’,’Content-Type’,’X-Custom-Header’)

Access-Control-Allow-Methods

默认情况下，CORS仅支持客户端发起GET,POST,HEAD请求。如果客户端希望通过PUT,DELETE等方式请求服务器的资源，则需要在服务器端，通过Access-Control-Allow-Methods来指明实际请求所允许的HTTP方法

1
2
3

res.setHeader('Access-Control-Allow-Methods','POST,GET,DELETE,HEAD')
//允许所有HTTP请求方法
res.setHeader('Access-Control-Allow-Methods','*')

请求类型

简单请求

满足两个条件即为简单请求：

1 请求方式为GET,POST,HEAD三者之一

2 HTTP头部信息不超过以下几种字段：无定义头部字段，Accept,Accept-Language,Content-Language,Save-Data,Viewport-Width,Width,Content-Type(仅限于text-plain,multipart/form-data,application/x-www-form-urlencoded三者之一)

特点：客户端与服务器只发生一次请求

预检请求

1 请求方式为GET,POST,HEAD之外的请求方法

2 请求头中包含自定义头部字段

3 向服务器发送了application/jso格式的数据

在浏览器服务器的正式通信之前，浏览器会先发送OPTION请求进行预检，以获知该服务器是否允许该实际请求，这一次OPTION称为预检请求，服务器成功响应预检请求后才会发送真正的请求并且携带真正的数据。

特点：客户端与服务器只发生两次请求

CORS注意事项

1 CORS主要在服务器端进行配置，客户端浏览器无需做任何额外的配置，即可请求开启CORS的接口

2 CORS在浏览器中有兼容性，只有支持XMLHttpRequest Level2的浏览器才能正常访问开启了CORS的服务端接口（IE10+,Chrome4+等）

小柒

基于cors解决跨域问题