Node.js-fs文件系统模块,path路径模块,HTTP模块,模块化,Express

// 导入fs模块  用fs接收fs模块
const fs = require('fs');
// 1. fs.readFile() 方法读取文件内容
fs.readFile('./files/test1.txt','utf8',function(err,dataStr){
    // 读取成功, err值为null,dataStr值为文本内容;  读取失败,err值为错误对象, dataStr值为undefined   
    console.log(err);// 打印失败结果
    console.log(dataStr);// 打印成功结果
    // 判断文件是否读取成功
    if(err){  //err为true
        return console.log('文件读取失败!' + err.message);  //返回 并显示读取失败原因
    }
    console.log('文件读取成功!' + dataStr)  //返回文件内容
})

3.写入文件内容

向指定文件写入内容: fs.writeFile(file, data, [opyions], callback);

参数1：必选参数，需要指定一个文件路径的字符串，表示文件的存放路径
参数2：必选参数，表示要写入的内容
参数3：可选参数，表示以什么格式写入文件内容，默认值是 utf8
参数4：必选参数，文件写入完成后的回调函数
新写入内容会覆盖旧内容

const fs = require('fs');
fs.writeFile('./files/test.txt','写入writeFile()',function(err){
    // 写入成功, err值为null; 写入失败,err值为错误对象
    // 文件若不存在, 只要路径正确, 可自动创建,并将内容写入
    //写入内容会覆盖原文本内容 
    console.log(err);
})

4.路径动态拼接问题

在使用fs 模块操作文件时,如果提供的操作路径是以 ./ 或 ../ 开头的相对路径时,很容易出现路径动态拼接错误的问题, 因为代码在运行的时候,会以执行node命令时所处的目录,动态拼接出被操作文件的完整路径

解决:

在使用fs模块操作文件时,直接提供完整路径 (从盘符开始, 改为\\ 移植性差,不利于维护)
路径: __dirname + ' ./files/test.txt ' __dirname (双下划线) 当前文件所处目录

三.path路径模块

1.概念

Node.js官方提供的、用来处理路径的模块. 它提供了一系列的方法和属性, 用来满足用户对路径的处理需求
js导入 const path = require('path');

2.路径拼接

多个路径片段拼接为完整的路径字符串: path.join('[...path]');

...paths <string> 路径片段的序列返回值: <string>
每一个 ../ 可抵消一层路径(拼接后路径中不包含前边最近的一层路径)

const path = require('path');
const p = path.join('/a','/b','../','/c','/d');
console.log(p);  //  \a\c\d

3.获取文件名

获取路径中的最后一部分, 获取路径中的文件名: path.basename(path, [.ext]);

path: <string> 必选参数，表示一个路径的字符串
ext: <string> 可选参数，表示文件扩展名
返回: <string> 表示路径中的最后一部分

4.获取文件扩展名

获取路径中的扩展名部分: path.extname(path);

path: <string>必选参数,表示一个路径的字符串
返回: <string> 返回得到的扩展名字符串

const path = require('path');
// 定义文件存放路径
const fpath = 'a/b/c/index.html';
// 获取文件名    
console.log(path.basename(fpath));  //index.html  返回文件名及其后缀
console.log(path.basename(fpath,'.html'));  //index  只返回文件名
// 获取文件扩展名
console.log(path.extname(fpath));  // .html

四.HTTP模块

1.概念

Node.js官方提供用来创建web服务器的模块. 通过提供的http.createServer()方法,方便的把一台普通的电脑,变成一台Web服务器,从而对外提供Web资源服务
js导入: const http = require('http');

2.服务器相关

(1)IP地址

互联网上每台计算机的唯一地址
格式: 通常用“点分十进制”表示成(a.b.c.d)的形式, a,b,c,d 都是0~255 之间的十进制整数
互联网中每台 Web 服务器,都有自己的IP地址, 可在中断2使用命令ping + 网址,拿到IP地址
在开发期间,自己的电脑既是服务器也是客户端, 127.0.0.1能把自己电脑当一台服务器进行访问
IP地址是一长串数字,不直观,而且不便于记忆

(2)域名和域名服务器

域名（Domain Name）地址,字符型的地址方案
域名服务器(DNS，Domain name server),IP地址和域名是一一对应的关系，对应关系存放的电脑,提供IP地址和域名之间的转换服务的服务器
127.0.0.1 对应的域名是 localhost

(3)端口号

在一台电脑中,可以运行成百上千个web服务, 每个web服务都对应一个唯一的端口号, 客户端发送过来的网络请求, 通过端口号, 可以被准确地交给对应的web服务进行处理
每个端口号不能同时被多个 web 服务占用
在实际应用中, URL中的 80 端口可以被省略

3.创建web服务器

(1)基本步骤

导入http模块 const http = require('http');
创建web服务器实例 http.createServer();
为服务器实例绑定request事件,监听客户端的请求实例.on('request', callback)
启动服务器实例.listen(端口号, callback) 可在VSCode中新建终端,输入命令即可

(2)req请求对象

访问与客户端相关的数据或属性 e.g:url , method

(3)res响应对象

访问与服务器相关的数据或属性 end() 向客户端发送指定内容,并结束本次请求处理过程

(4)不同的url响应不同html内容

//1.导入 http 模块
const http = require('http');  
//2.创建 web 服务器实例
const server = http.createServer();  
//3.为服务器实例绑定 request 事件，监听客户端的请求
server.on('request', (req, res)=>{ 
    console.log('Someone visit my web');
    //5.req请求对象     url 客户端请求的url地址     method 客户端请求的method类型
    const url = req.url;   // 端口号后边/开始当做请求的url地址
    const method = req.method;
    const str = `url地址: ${url},method方式: ${method}`;  //${ }获取变量  ~键下的```  不是'
    console.log(str);
    //8.根据不同url响应不同的html内容
    let content = '<h1>404 NOT Found </h1>'; //设置默认内容为 404 NOT Found 
    if(url === '/' || url === '/index.html'){  //用户请求首页
        content = '<h1>首页</h1>';
    }else if (url === '/test.html'){
        content = '<h1>关于页面</h1>';
    }
    //6.防止响应消息中文乱码
    res.setHeader('Content-Type', 'text/html; charset=utf-8');
    //7.res响应对象  end 向客户端发送指定内容, 并结束请求处理过程
    res.end(content);   

})
//4.启动服务器
server.listen('80',function(){   
    console.log('run http://127.0.0.1:80');
})

五.模块化

1.概念

编程领域中的模块化,就是遵守固定的规则,把一个大文件拆成独立并互相依赖的多个小模块

把代码进行模块化拆分的好处：
提高了代码的复用性
提高了代码的可维护性
可以实现按需加载

模块化规范

对代码进行模块化的拆分与组合时,需要遵守的那些规则

好处:遵守同样的模块化规范写代码,降低了沟通成本,极大方便了各个模块之间相互调用,利人利己

2.Node.js中模块化

(1)分类

内置模块（由 Node.js 官方提供的,e,g: fs, path, http等）
自定义模块（用户创建的每个 .js 文件，都是自定义模块）
第三方模块 (由第三方开发,并非官方提供的内置模块,也不是用户创建的自定义模块,使用前需先下载)

(2)模块加载

require(' 模块名') 加载所需的模块

加载用户自定义模块时,需写路径 e.g: const userM = require('./uesr.js') 可省略后缀名
使用require() 方法加载其它模块时, 会执行被加载模块中的代码

(3)模块作用域

在自定义模块中定义的变量,方法等成员, 只能在当前模块内被访问, 模块级别的访问限制
防止全局变量污染问题

(4)向外共享模块作用域成员

module对象

存储了和当前模块有关的信息

module.exports对象

在自定义模块中, 可将模块内的成员共享出去,供外界使用。外界用require() 导入自定义模块时,得到的就是module.exports所指向的对象
使用 require() 方法导入模块时,导入的结果,永远以module.exports指向的对象为准

exports对象

默认情况下,exports和module.exports指向同一个对象, 最终共享的结果,还是以module.exports指向的对象为准

注意:

为了防止混乱,建议不要在同一个模块中同时使用exports和module.exports
require()导入模块时, 得到的永远是module.exports指向的对象

(5)模块化规范

Node.js遵循了CommonJS模块化规范,CommonJS规定了模块的特性和各模块之间如何相互依赖

CommonJS 规定：

每个模块内部, module变量代表当前模块
module变量是一个对象,它的exports属性（即 module.exports）是对外的接口
加载某个模块,其实是加载该模块的 module.exports 属性, require() 方法用于加载模块

3.npm与包

(1)包

Node.js中的第三方模块又叫做包
由第三方个人或团队开发,免费且开源的，不需要付费即可免费下载使用
包是基于内置模块封装出来的,提供了更高级,更方便的API,极大的提高了开发效率(Node.js内置模块仅提供了一些底层的API, 导致在基于内置模块进行项目开发的时, 效率很低)
包和内置模块之间的关系, 类似于jQuery和浏览器内置 API 之间的关系

下载(npm, Inc. 公司提供)

https://www.npmjs.com/ 网站上搜索包
https://registry.npmjs.org/ 服务器上下载包 (管理工具下载)
Node Package Manager(npm包管理工具),随Node.js安装包一起被安装
终端中执行npm -v命令, 查看npm包管理工具的版本号

(2)npm

常用命令

安装指定名称包 npm install 完整包名称 (简写 npm i 包名)
安装指定版本包 npm i 包名@版本号 (版本会替换, 不需要卸载再安装)
安装多个包 npm i 包名包名
一次性安装所有依赖包 npm i
卸载包 npm uninstall 包名命令执行成功后,会把卸载的包自动从dependencies 中移除
安装包记录到devDependencies节点: npm install 包名 --save-dev (简写 npm i 包名 -D)

安装后增加的文件

node_modules文件夹用来存放所有已安装到项目中的包, require() 导入第三方包时,从这个目录中查找并加载包
package-lock.json配置文件记录每个包的下载信息,如包名,版本号,下载地址

包的语义化版本规范

包的版本号是以“点分十进制”形式定义,共有三位数字
第1位数: 大版本, 第2位:功能版本, 第3位:Bug修复版本
版本号提升的规则: 只要前面的版本号增长了,则后面的版本号归零

(3)包管理配置文件

npm规定,项目根目录中,必须有package.json包管理配置文件,用来记录与项目有关的一些配置信息

项目的名称、版本号、描述等
项目中都用到了哪些包
哪些包只在开发期间会用到
那些包在开发和部署时都需要用到

dependencies节点: package.json文件中,专门用来记录使用 npm install命令安装了哪些包,某些包在开发和项目上线之后都需要用到,则将这些包记录其中

devDependencies节点: 某些包只在项目开发阶段用到,上线之后不会用到,把这些包记录到该节点中

多人协作问题

第三方包的体积过大,不方便团队成员之间共享项目源代码, 故需在共享时剔除node_modules

在项目根目录中,创建一个package.json配置文件,即可用来记录项目中安装了哪些包,从而方便剔除 node_modules 目录之后，在团队成员之间共享项目的源代码
注意：今后在项目开发中,一定要把node_modules文件夹,添加到 .gitignore 忽略文件中

快速创建配置文件

在执行命令时所处的目录中,快速创建 package.json包管理配置文件： npm init -y

该命令只能在英文的目录下成功运行, 项目文件夹名称一定要使用英文命名,不能出现空格
运行npm install命令安装包时,npm包管理工具会自动把包名和版本号,记录到package.json中

(4)镜像

镜像(Mirroring)是一种文件存储形式,一个磁盘上的数据在另一个磁盘上存在一个完全相同的副本

npm下包时,默认从国外的 https://registry.npmjs.org/ 服务器进行下载,网络数据的传输需要海底光缆,因此下包速度会很慢
淘宝NPM镜像服务器: 专门把国外官方服务器上的包同步到国内的服务器,然后在国内提供下包的服务,从而极大的提高了下包的速度

切换npm下包镜像源

查看当前下包镜像源: npm config get registry
当前下包源切换为淘宝镜像源: npm config set registry=https://registry.npm.taobao.org/
检查镜像源是否下载成功: npm config get registry

nrm

nrm小工具: 更方便的切换下包的镜像源, 利用nrm提供的终端命令,快速查看和切换下包的镜像源

安装nrm为全局可用工具: npm i nrm -g
查看可用镜像源: nrm ls
切换为淘宝镜像源: nrm use taobao

(5)包的分类

使用npm包管理工具下载的包,共分为两大类：项目包 , 全局包

项目包

node_modules 目录中的包, 项目包又分为两类,分别是

开发依赖包（被记录到 devDependencies 节点中的包，只在开发期间会用到）
核心依赖包（被记录到 dependencies 节点中的包，在开发期间和项目上线之后都会用到）

全局包

安装时使用-g参数, 会被安装到C:\Users\用户目录\AppData\Roaming\npm\node_modules 目录下

只有工具性质的包,才有全局安装的必要性, 因为它们提供了好用的终端命令
判断某个包是否需要全局安装后才能使用, 可以参考官方提供的使用说明即可

i5ting_toc

可以把md文档转为 html 页面的小工具

安装: npm i -g i5ting_toc
调用: i5ting_toc -f 要转换的md文件路径 -o

(6)规范的包结构

一个规范的包,它的组成结构,必须符合以下 3 点要求

包必须以单独的目录而存在
包的顶级目录下要必须包含 package.json 这个包管理配置文件
package.json中必须包含name,version,main这三个属性, 分别代表包的名字,版本号,包的入口
更多的约束参考如下网址： https://yarnpkg.com/zh-Hans/docs/package-json

(7)开发自己的包

新建包根目录
其中新建: package.json(包管理配置文件),index.js(包入口文件),README.md(包说明文档)
初始化package.json
index.js中定义方法

license 许可协议相关的内容，可参考 https://www.jianshu.com/p/86251523e898

(8)发布包

终端登录账号 npm login (官方服务器才可)
终端切换到根目录后, npm publish (包名不可雷同)
删除已发布的包 npm unpublish 包名 --force (只能删72时内的, 删后24时内不允许重复发布)

4.模块的加载机制

(1)优先从缓存中加载

模块在第一次加载后会被缓存, 多次调用require()不会导致模块的代码被执行多次
注意：不论内置,用户自定义还是第三方模块,都会优先从缓存中加载,从而提高模块的加载效率

(2)内置模块加载机制

内置模块的加载优先级最高
如: require('fs') 始终返回内置的fs模块，即使在node_modules目录下有名字相同的包也叫fs

(3)自定义模块加载机制

使用require()加载自定义模块时,必须指定以 ./ 或 ../ 开头的路径标识符, 若没有则当作内置模块或第三方模块进行加载
使用require()导入自定义模块时, 如果省略文件扩展名, 则Node.js会按顺序分别尝试加载以下的文件：按照确切的文件名进行加载; 补全.js扩展名进行加载; 补全.json扩展名进行加载; 补全 .node 扩展名进行加载; 加载失败,终端报错

(4)第三方模块加载机制

传递给require()的模块标识符不是一个内置模块,也没有以 ‘./’ 或 ‘../’ 开头, 则 Node.js 会从当前模块的父目录开始, 尝试从 /node_modules 文件夹中加载第三方模块
如果没有找到对应的第三方模块,则移动到再上一层父目录中,进行加载,直到文件系统的根目录

六.Express

1.简介

(1)概念

Express 是基于 Node.js 平台，快速、开放、极简的 Web 开发框架
作用和Node.js内置的http模块类似, 是专门用来创建 Web 服务器的
本质：一个npm上的第三方包, 提供了快速创建Web服务器的便捷方法
http内置模块使用复杂,开发效率低; Express基于内置http模块进一步封装,能极大提高开发效率
http://www.expressjs.com.cn/

(2)基本使用

安装: npm i express@版本号 (项目所处目录中执行命令)

// 1. 导入express
const express = require('express');
// 2. 创建web服务器
const webExp = express();
// 4.监听客户端get post请求,并向客户端响应具体内容     req: 请求对象   res: 响应对象
webExp.get('./user', (req,res) => {
	// 调用express提供的send(), 向客户端响应JSON对象
	res.send({name: 'mm', age: 18})
})
webExp.post('./user', (req, res) => {
	res.send('请求成功!');   //响应字符串
})
webExp.get('/', (req,res) => {
	// req.query 获取客户端发送过来的查询参数  默认为空对象
	console.log(req.query);
	res.send(req.query);
})
webExp.get('/user/:id', (req,res) => {   // :id 动态参数
	// req.params 动态匹配url参数, 默认空对象
	console.log(req.params)
;	res.send(req.params);
})
// 3. 启动服务器
webExp.listen(8080, ()=>{
	console.log('express server running at http://127.0.0.1:8080')
})

(3)托管静态资源

express.static() 创建静态资源服务器多次调用可实现托管多个

e.g: 对外开放访问: app.use(express.static('文件夹名'))
Express在指定的静态目录中查找文件,并对外提供资源的访问路径. 因此,存放静态文件的目录名不会出现在URL中
多个时,先查找前边,再查找后边

(4)挂载路径前缀

在托管的静态资源访问路径之前,挂载路径前缀: app.use('/文件夹名',express.static('文件夹名'))

(5)nodemon

该工具可监听项目文件的变动,当代码被修改后,会自动重启项目,极大方便了开发和调试

安装: npm install -g nodemon
启动项目: nodemon 文件路径

2.Express路由

(1)概念

广义上来讲, 路由就是映射关系

Express中的路由

客户端的请求与服务器处理函数之间的映射关系 e.g: get, post请求
3部分: 请求的类型、请求的 URL 地址、处理函数格式: app.METHOD(PATH, HANDLER)

路由的匹配过程

每当一个请求到达服务器之后,需先经过路由的匹配,只有匹配成功后,才会调用对应的处理函数
在匹配时,会按照路由的顺序进行匹配,如果请求类型和请求的 URL 同时匹配成功,则 Express 会将这次请求，,转交给对应的function函数进行处理
注意: 按照定义的先后顺序进行匹配, 请求类型和请求的URL必须同时满足

(2)路由的使用

最简单用法: 把路由挂载到创建的服务器app上, 不建议 (get, post请求)

路由模块化: 推荐将路由抽离为单独的模块, 将路由抽离为单独模块的步骤如下：

创建路由模块对应的 .js 文件
调用 express.Router() 函数创建路由对象
向路由对象上挂载具体的路由
使用 module.exports 向外共享路由对象
使用 app.use() 函数注册路由模块

为路由模块添加前缀: e.g: app.use('/api', router);

// 路由模块化
const express = require('express'); // 1. 导入路由模块
var router = express.Router();      // 2. 创建路由对象
router.get('/user/list', (req, res) => {   //  3. 挂载具体路由
	res.send('get sucess!')
})
router.post('/user/add', (req, res) => { 
	res.send('post sucess!')
})
module.exports = router;  //  4. 向外导出路由对象

// 1. 导入路由模块
const router = require('./16-router');
// 2. 注册路由模块    注册全局中间件
app.use(router);  
// 为路由模块添加前缀
// app.use('/api', router);

3.Express中间件

(1)概念

中间件(Middleware), 特指业务流程的中间处理环节
Express的中间件, 本质上就是一个 function处理函数

中间件的调用流程

当一个请求到达Express的服务器之后,可以连续调用多个中间件,从而对这次请求进行预处理
中间件函数的形参列表中,必须包含next参数, 而路由处理函数中只包含req和res

next函数

实现多个中间件连续调用的关键,它表示把流转关系转交给下一个中间件或路由

中间件作用

多个中间件之间,共享同一份 req和res, 可以在上游中间件中,统一为req或res对象添加自定义的属性或方法, 供下游的中间件或路由进行使用

(2)中间件的使用

定义中间件

全局生效的中间件

客户端发起的任何请求,到达服务器之后,都会触发的中间件
使用app.use()连续定义多个全局中间件,客户端请求到达服务器之后,会按照中间件定义的先后顺序依次进行调用

局部生效的中间件

不使用 app.use() 定义的中间件
定义多个中间件时,只需将中间件写进路由中, 只在局部生效

// 定义中间件
const center = function(req,res,next){
	console.log('简单中间件');
	next();  //把流转关系转交给下一个中间件或路由
}
// 将center注册为全局生效的中间件 
app.use(center);

// 简化定义全局生效的中间件
app.use((req,res,next) => {
	console.log('全局生效的中间件中间件');
	next();
})

// 局部生效中间件   两种定义方式等价, 先调用第一个再第二个
app.get('./',center1,center2,(req,res) => { res.send('1hh') });
app.get('./',[center1, center2],(req,res) => { res.send('2hh') });

注意事项

一定要在路由之前注册中间件
客户端发送过来的请求，可以连续调用多个中间件进行处理
执行完中间件的业务代码之后，不要忘记调用 next() 函数
为了防止代码逻辑混乱，调用 next() 函数后不要再写额外的代码
连续调用多个中间件时，多个中间件之间，共享 req 和 res 对象

(3)分类

应用级别的中间件

绑定到实例上的中间件

路由级别的中间件

绑定到express.Router()实例上的中间件,用法同应用级别中间件

错误级别的中间件

专门用来捕获整个项目中发生的异常错误，从而防止项目异常崩溃的问题
function处理函数中,必须有4个形参,形参顺序从前到后(err, req, res, next)
必须注册在所有路由之后

Express内置的中间件

自Express4.16.0 版本开始,内置了3个常用中间件,极大的提高了Express项目的开发效率和体验

express.static快速托管静态资源的内置中间件,如: HTML文件,图片,CSS 样式等（无兼容性）
express.json 解析JSON 格式的请求体数据（有兼容性，仅在 4.16.0+ 版本中可用）
express.urlencoded解析URL-encoded格式的请求体数据(有兼容性,仅在4.16.0+版本中可用)

// Express内置中间件   
// express.json  配置解析application/json格式数据
app.use(express.json());   //使用express.json()中间件解析JSON对象
// express.urlencoded  配置解析application/x-www-form-urlencoded格式数据
app.use(express.urlencoded({extended: false}))
app.post('/user',(req,res) => {
	//在服务器端,可使用req.body属性,来接收客户端发送过来的请求体数据(JSON格式的表单数据和url-encoded格式的数据), 默认情况,若不配置解析表单数据的中间件,则返回undefined, 不配置解析url-encoded格式数据的中间件,返回{}
	console.log(req.body);  
})

第三方的中间件

非Express官方内置的,由第三方开发出来的中间件,在项目中,可按需下载并配置第三方中间件,从而提高项目的开发效率

在express@4.16.0之前的版本中,常使用body-parser第三方中间件,来解析请求体数据,步骤如下:

运行npm install body-parser 安装中间件
使用 require 导入中间件
调用 app.use() 注册并使用中间件
注意：Express内置的express.urlencoded中间件,就是基于body-parser进一步封装出来的

// 第三方中间件
const parser = require('body-parser');
app.use(parser.urlencoded({extended: false}));
app.post('/user', (req, res) =>{
	console.log(req.body);
	res.send('ok');
})

(4)自定义中间件

手动模拟类似express.urlencoded这样的中间件,来解析POST提交到服务器的表单数据, 实现步骤:

定义中间件 (app.use() 来定义全局生效的中间件)
监听req的data事件 (获取客户端发送到服务器的数据, 需手动对接收到的数据进行拼接)
监听req的end事件 (拿到并处理完整的请求体数据)
使用querystring模块解析请求体数据 (查询字符串解析成对象的格式)
将解析出来的数据对象挂载为req.body (挂载为req的自定义属性供下游使用)
将自定义中间件封装为模块 (优化代码结构)

4.使用Express写接口

(1)创建基本服务器

导入express模块, 创建express的服务器实例, 调用listen()指定端口号并启动web服务器

(2)创建API路由模块

路由模块: 导入模块,创建路由对象,挂载路由模块,向外导出路由

(3)编写get/post接口

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

// 挂载对应路由  get 接口   post 接口
router.get('/get', (req, res) => {
	const  query = req.query;  // 通过req.query获取客户端查询字符串,发送到服务器的数据
	res.send({   // 向客户端响应处理结果
		status: 0,  //0处理成功, 1处理失败
		msg: 'get请求成功!',  //状态描述
		data: query   //响应给客户端的数据
	})
})
router.post('/post',(req, res) => {
	const body = req.body;   //获取请求体中 url-encoded 格式数据
	res.send({
		status: 0,
		msg: 'post请求成功!',  
		data: body  
	})
})

(4)CORS跨域资源共享

GET和POST接口不支持跨域请求, 解决接口跨域问题:

CORS（主流的解决方案，推荐使用）安装,导入,调用app.use(cors()) 配置
JSONP（有缺陷的解决方案：只支持 GET 请求）

概念

CORS (Cross-Origin Resource Sharing，跨域资源共享)由一系列HTTP响应头组成,这些HTTP响应头决定浏览器是否阻止前端 JS 代码跨域获取资源
浏览器的同源安全策略默认会阻止网页“跨域”获取资源, 但如果接口服务器配置了 CORS 相关的HTTP响应头，就可以解除浏览器端的跨域访问限制

注意事项

主要在服务器端进行配置. 客户端浏览器无须做任何额外配置,即可请求开启CORS的接口
在浏览器中有兼容性, 只有支持XMLHttpRequest Level2的浏览器,才能正常访问开启了CORS 的服务端接口（例如：IE10+、Chrome4+、FireFox3.5+）

CORS响应头部

Access-Control-Allow-Origin: <origin> | *

origin 参数的值指定了允许访问该资源的外域 URL
指定字段的值为通配符 *, 表示允许来自任何域的请求

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 对额外的请求头进行声明，否则这次请求会失败
声明 res.setHeader('Access-Control-Allow-Headers','Content-Type, X-Custom-Header')

Access-Control-Allow-Methods

默认情况下,CORS 仅支持客户端发起 GET、POST、HEAD 请求
如果客户端希望通过PUT,DELETE等方式请求服务器的资源,则需要在服务器端,通过 Access-Control-Alow-Methods来指明实际请求所允许使用的 HTTP 方法
只允许的请求 res.setHeader('Access-Control-Allow-Methods','POST,GRT,DELETE,HEAD');
允许所有HTTP请求方法 res.setHeader('Access-Control-Allow-Methods','*');

CORS请求分类

根据请求方式和请求头的不同,分为:

①简单请求

请求方式：GET、POST、HEAD 三者之一
HTTP 头部信息不超过以下几种字段：无自定义头部字段、Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width 、Content-Type（只有三个值application/x-www-form-urlencoded、multipart/form-data、text/plain）

②预检请求

请求方式为 GET、POST、HEAD 之外的请求 Method 类型
请求头中包含自定义头部字段
向服务器发送了 application/json 格式的数据

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

两者区别:

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

JSONP接口

浏览器端通过<script>标签的src 属性,请求服务器上的数据,同时,服务器返回一个函数的调用
JSONP不属于真正的Ajax 请求,因为它没有使用 XMLHttpRequest这个对象, 仅支持 GET 请求，不支持POST、PUT、DELETE等请求

创建注意事项

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

实现步骤

// 必须在配置cors中间件之前 ,配置JSON接口
app.get('/api/jsonp', (req,res) => {
	const fName = req.query.callback; // 1. 获取客户端发送过来的回调函数的名字  查询字符串中包含属性callback值为函数名
	const  data = { name: 'mm', age: 18 } // 2. 得到要通过 JSONP 形式发送给客户端的数据对象
	const scriptStr = `${fName}(${JSON.stringify(data)})`; // 3. 根据前两步得到的数据，拼接出一个函数调用的字符串
	res.send(scriptStr); // 4. 把上一步拼接得到的字符串，响应给客户端的 <script> 标签进行解析执行
})

Mteee.

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Node.js-fs文件系统模块,path路径模块,HTTP模块,模块化,Express

一大堆记不住啊记不住的东西, 哪位hxd教教我!_! ...... Node.js, fs文件系统模块, path路径模块, HTTP模块, 模块化(npm), Express......
复制链接

扫一扫