Express中的app.use的一些用法

布满荆棘的人生 2022-12-10 01:17 237阅读 0赞

## express中的app.use的用法 ##

在Express框架中，有一个app.use() 这个方法在经常使用，好么，它到底有什么作用呢

#### 加载第三方模块插件 ####

> //配post请求  
> const bodyParser = require(“body-parser”); //导入了第三方插件  
> //加载了第三方插件模块  
> app.use(bodyParser.urlencoded(\{ extended: false, limit: “30mb” \}));  
> app.use(bodyParser.json(\{ limit: “30mb” \}))

#### 加载路由 ####

> `1`.app.use("/stuInfo",require("./routes/StuInfoRouter.js"));

#### 加载静态区域 ####

> `1`.app.use("/public", express.static(path.join(\_\_dirname, “./public”)));

#### 使用拦截器 ####

> 在所有请求之前（也就是所有路由之前去拦截）

app.use((req,resp,next)=>\{  
//所有经过路由的请求就会先到达这里被拦下来，如果想放行，直接调用next()  
\});

#### 配合 express-async-errors处理全局异常 ####

const express  = require("express");
    require("express-async-errors");

> //后面这段代码一定要写在路由后面  
> //服务器报错以后500

app.use((error, req, resp, next) => { 
        if (req.xhr) { 
            resp.json({  status: "fail", msg: "服务器错误" });
        }
        else { 
            console.log(error);
            //只有报错才会进这里
            resp.render("status/500");
        }
    });

## 关于Ajax的一些补充 ##

#### get请求 ####

**get请求的页面代码**

**get请求的后台代码**

app.get("/getAjax1", (req, resp) => { 
        console.log(req.query);
        resp.json({  status: "success", msg: "请求成功" });
    });

#### post请求 ####

**post请求的页面代码**

**后台代码**

//配post请求 后台请求一定要配置
    const bodyParser = require("body-parser");
    app.use(bodyParser.urlencoded({  extended: false, limit: "30mb" }));
    app.use(bodyParser.json({  limit: "30mb" }));
    
    
    app.post("/postAjax2", (req, resp) => { 
        console.log(req.body);
        resp.json({  status: "success", msg: "请求成功" });
    });

> 这个时候我们可以明显的发现，post表求有Ajax代码有很多不一样

> `1.` 它在请求之前一定要设置一个请求头`xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");`  
> `2.`它的数据是通过 `xhr.send("userName=biaogege");`,不像get那样，直接拼在了url地址的后面

重要：

> 关于post请求，因为是可以设置RequestHeader 这个东西的，所以在传递数据的时候，我们可以不使用拼接的方式，直接传递一个JSON字符串过去，只要后台做了解析的就可以了

**后台的配置**

//配post请求 后台请求一定要配置
    const bodyParser = require("body-parser");
    
    //这一行代码是解析application/x-www-form-urlencoded
    app.use(bodyParser.urlencoded({  extended: false, limit: "30mb" }));
    
    //这一行代码就是解析application/json
    app.use(bodyParser.json({  limit: "30mb" }));

**页面上面的请求方式**

> 在上面的代码过程当中， 我们在向后台直接 xhr.send(JSON.stringify(obj)); 发送了一个JSON字符串，并且我们把请求头设置为了xhr.setRequestHeader(“Content-Type”, “application/json”); 后台服务器只要是做了相关的配置，就可以直接把这个POST过去的JSON字符串转换成一个对象

## Ajax的跨域 ##

Ajax的请求默认情况下是不可以跨域的  
**什么是域？什么是跨域？**

> 域指的是origin,跨域指的源地址的域与请求目标地址域不相同，这样就叫域

如下所示

> 源地址：`http://127.0.0.1:5500/ajax1.html`  
> 目标地址：`http://192.168.9.254:81/getAjax1?userName=biaogege`

这样源地址的域是`http://127.0.0.1:5500`,而目标地址的域是`http://192.168.9.254:81`。两个地址的域不相同，这样就叫跨域

而Ajax默认是不允许跨域的（受**同源策略**的影响，这是浏览器的限制，浏览器不允许不同的域之间交互数据），如果发生跨域请求，则会报错误

> Aajx如果想实列跨域获取数据，则一定要后台开始\`CORS

## 跨域资源共享CORS ##

CORS：`corss origin resource share`，它是在服务端设置的

> resp.setHeader(“Access-Control-Allow-Origin”,"\*");  
> resp.setHeader(“Access-Control-Allow-Methods”,“GET,POST,PUT,DELETE,OPTIONS”);  
> resp.setHeader(“Access-Control-Allow-Headers”,“Content-Type”);

解决跨域除了上面的方式以外，还有另外的几种方式列举一下

1.  `CORS`跨域资源共享
2.  `jsonp`
3.  `nginx`反向代理