[TOC]

1. 如何编写get接口

//router.js 
const express = require('express');
const apiRouter = require('./router.js') 
const app = express(); 
app.use('/api',apiRouter) 
app.listen(80, () => {  
    console.log('server is running')
}) 
//index.js
const express = require('express') 
const apiRouter = express.Router();
//挂载对应得路由 
apiRouter.get('/get', (req, res) => {   
    //获取到客户端通过查询字符串，发送到服务器得数据
    const query = req.query  
    res.send({   
        status:200, 
        msg: 'success', 
        data: query   
    })
}) 
module.exports = apiRouter

2. 如何编写post接口

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

//index.js
const express = require('express'); 
const apiRouter = require('./router.js') 
const app = express();
app.use(express.urlencoded({extended:false}))
app.use('/api',apiRouter) 
app.listen(80, () => {   
    console.log('server is running')
}) 
//router.js
const express = require('express') 
const apiRouter = express.Router();
//挂载对应得路由 
apiRouter.post('/add', (req, res) => {   
    const body = req.body; 
    res.send({    
        status:200, 
        msg: 'success',  
        data: body 
    }) 
}) 
module.exports = apiRouter

3 使用cors解决跨域

cors是express的一个第三方的中间件，通过安装和配置cors中间件，可以很方便的解决跨域问题。

运行 npm install cors安装中间件
使用const cors = require(‘cors’)导入中间件
在路由之前调用app.use(cors())配置中间件 ```javascript //index.js const express = require(‘express’); const apiRouter = require(‘./router.js’) const app = express(); app.use(express.urlencoded({extended:false})) //一定要在路由之前，配置cors这个中间件，从而解决接口跨域问题。 const cors = require(‘cors’) app.use(cors()) app.use(‘/api’,apiRouter) app.listen(80, () => {
console.log(‘server is running’) }) //router.js const express = require(‘express’) const apiRouter = express.Router(); //挂载对应得路由 apiRouter.get(‘/get’, (req, res) => {
//获取到客户端通过查询字符串，发送到服务器得数据 const query = req.query
res.send({
```
  status:200, 
  msg: 'success', 
  data: query  
```
}) }) apiRouter.post(‘/add’, (req, res) => {
const body = req.body; res.send({
```
  status:200, 
  msg: 'success',  
  data: body 
```
}) }) module.exports = apiRouter ;

//html.html <!DOCTYPE html>

<a name="TbqD4"></a>
## 3.1 什么是CORS
**cors（**Cross-Origin-Resource Sharing,**跨资源共享**），由一系列**HTTP**响应头组成，这些**HTTP**响应头决定浏览器**是否阻止**前端J**S代码**跨域**获取资源**。<br />**浏览器**的**同源策略**默认会**阻止**网页**“跨域**”获取资源。但如果接口服务器配置了**CROS**相关的**HTTP**响应头，就可以解除**浏览器**端的**跨域访问限制**。
<a name="piOzN"></a>
## 3.2 CORS的注意事项

- **CORS主要在服务器端进行配置。客户端浏览器无需做任何额外的配置， 即可请求开启了CORS的接口。**
- **CORS在浏览器中有兼容性。 只支持XMLHTTPRequest Level2的浏览器。**
<a name="QgZb9"></a>
## 3.3 CORS响应头部
**CORS**响应头部——**Access-Control-Allow-Origin**字段，其语法如下：<br /> Access-Control-Allow-Origin:<origin> | *<br />其中：**origin**参数的值指定了允许访问该资源的外域**URL**,例如下面的字段只允许来自http://www.baidu.com的请求：<br />res.setHeader('Access-Control-Allow-Origin', 'http:www.baidu.com')<br />如果指定了**Access-Control-Allow-Origin**字段的值为**通配符***，表示允许来自任何域的请求：<br />res.setHeader('Access-Control-Allow-Origin', '*')
<a name="CuvWM"></a>
## 3.4 CORS 请求头- Access-Control-Allow-Headers
默认情况下，CORS **仅**支持客户端向服务器发送如下的 9 个请求头：<br />Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width 、<br />Content-Type （值仅限于 text/plain、multipart/form-data、application/x-www-form-urlencoded 三者之一）<br />如果客户端向服务器发送了额外的请求头信息，则需要在服务器端，通过 Access-Control-Allow-Headers 对额外<br />的请求头进行声明，否则这次请求会失败！<br />res.setHeader('Access-Control-Allow-Origin', 'Content-Type, X-Custom-Header')
<a name="yPATK"></a>
## 3.5 CORS 响应头部 - Access-Control-Allow-Methods
默认情况下，CORS 仅支持客户端发起 GET、POST、HEAD 请求。<br />如果客户端希望通过 PUT、DELETE 等方式请求服务器的资源，则需要在服务器端，通过 Access-Control-Alow-Methods<br />来指明实际请求所允许使用的 HTTP 方法。<br />示例代码如下：<br />//只允许POST,GET，DELETE,HEAD请求方法 res.setHeader('Access-Control-Allow-Methods', 'POST,GET,DELETE,HEAD') //允许所有的HRTTP请求方法 res.setHeader('Access-Control-Allow-Methods', '*') 
<a name="KlYq1"></a>
## 3.6 CORS请求的分类
<a name="h8sLy"></a>
### 3.6.1 简单请求
同时满足以下两个条件的属于简单请求<br />① 请求方式：GET、POST、HEAD 三者之一<br />② HTTP 头部信息不超过以下几种字段：无自定义头部字段、Accept、Accept-Language、Content-Language、DPR、<br />Downlink、Save-Data、Viewport-Width、Width 、Content-Type（只有三个值application/x-www-form<br />urlencoded、multipart/form-data、text/plain）

<a name="syh6a"></a>
### 3.6.2 预检请求
只要符合以下任何一个条件的请求，都需要进行预检请求：<br />① 请求方式为 GET、POST、HEAD 之外的请求 Method 类型<br />② 请求头中包含自定义头部字段<br />③ 向服务器发送了 application/json 格式的数据<br />在浏览器与服务器正式通信之前，浏览器会先发送 OPTION 请求进行预检，以获知服务器是否允许该实际请求，所以这一<br />次的 OPTION 请求称为“预检请求”。服务器成功响应预检请求后，才会发送真正的请求，并且携带真实数据。
<a name="hQZMN"></a>
### 3.6.3 简单请求和预检请求的区别：

- 简单请求的特点：客户端和服务器之间只会发生一次请求；
- 预检请求的特点：客户端和服务器之间会发生两次请求，OPTION预检请求完成之后， 才会发起正在的请求。
```javascript
//客户端 
$('#delete').on('click', function () { 
    $.ajax({   
        type: 'DELETE',  
        url: 'http:127.0.0.1/api/delete', 
        data: {
            name: 'IRIC',  
            age: 20,    
            gender:'boy'
        },  
        success: (res) => {
            console.log(res) 
        },
    })
}) 
//服务端 
apiRouter.delete('/delete', (req, res) => {  
    res.send({  
        status:200,  
        msg: 'success' 
    })
})

4. 使用JSONP解决跨域

JSONP的概念：浏览器端通过

NodeJS

11. 接口

1. 如何编写get接口

2. 如何编写post接口

3 使用cors解决跨域

4. 使用JSONP解决跨域