前言

本节主要记录一些koa项目一定会使用到的基本相关库，如解决跨域的koa2-cors、解析body数据的koa-boby、静态资源的koa-static、以及koa-session

一、koa-cors

什么是跨域请求

当前发起请求的域与该请求指向的资源所在的域不一样。我们认为若协议 + 域名 + 端口号均相同，那么就是同域。出于安全起见，浏览器会对跨域请求进行限制，来抵制cors攻击。

跨域请求的方法

<script><img><iframe> 等标签不受同源策略限制，拥有可以从不同域加载并执行资源的特性，来实现数据跨域传输。
设置HTTP有关跨域请求的首部字段

Access-Control-Allow-Origin: <origin> | * // 说明服务器允许哪些域可以访问该资源
Access-Control-Allow-Methods: <method>[, <method>]* // 指明实际请求所允许使用的HTTP方法
Access-Control-Allow-Headers: <field-name>[, <field-name>]* //指明实际请求中允许携带的首部字段
Access-Control-Max-Age: <delta-seconds> //预检请求能够被缓存多久
Access-Control-Allow-Credentials: true //是否允许发送Cookie

通常我们只需将请求头部这样设置Access-Control-Allow-Origin：*即可解决跨域阻拦。而koa-cors库便是将这一过程封装起来，从而到达解决请求跨域问题。

koa-cors的使用

npm install koa-cors --save // 安装import cors from 'koa2-cors'
const app = new Koa()
// 默认使用
app.use(cors())
// 跨域请求配置
app.use(cors({origin: function (ctx) { //设置允许来自指定域名请求return '*';},maxAge: 5, //指定本次预检请求的有效期，单位为秒。credentials: true, //是否允许发送CookieallowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], //设置所允许的HTTP请求方法allowHeaders: ['Content-Type', 'Authorization', 'Accept'], //设置服务器支持的所有头信息字段exposeHeaders: ['auth', 'city'] //设置获取其他自定义字段})
)

koa-cors组件使用起来非常的简单，只需安装完后在项目主文件中将其挂载在项目上即可，没有特殊需求，只需简单调用。默认设置已可以解决跨域问题。用户也可以自行配置想过跨域字段的值，通过options参数来传递配置。

二、koa-boby 与 koa-bodyparser

由于数据在传输过程中是以JSON格式进行传递的，如果使用原始node则需要对数据进行JSON转换，比较繁琐。因此使用koa-boby 与 koa-bodyparser包可以格式化传递的参数，使数据获取更便捷。

安装

yarn add koa-body
yarn add koa-bodyparser
npm install koa-body
npm install koa-bodyparser

koa-body的使用
koa-body可以处理请求数据类型为multipart/form-data、application/x-www-form-urlencoded、application/json、application/json-patch+json、application/vnd.api+json、application/csp-report、text/xml常规使用方式如下：

const koaBody = require('koa-body')
app.use(koaBody({// 支持文件格式multipart: true,formidable: {// 保留文件扩展名keepExtensions: true,}
}))

koa-body相关参数配置

patchNode {Boolean}: 在node里获取body数值的方式是否为 ctx.req, 默认为false
patchKoa {Boolean}: 在koa里获取body数值的方式是否为 ctx.request, 默认为true
jsonLimit {String|Integer} 可传输Json格式数据的大小, 默认为1mb
formLimit {String|Integer} 可传输form格式数据的大小, 默认为56kb
textLimit {String|Integer} 可传输text格式数据的大小, 默认为56kb
encoding {String} 编码方式的设置，默认为utf-8
multipart {Boolean} 是否支持 multipart-formdate 的表单，默认为 false
urlencoded {Boolean} 是否支持urlencoded 的表单, 默认为 true
text {Boolean} 是否解析text/plain 的表单, true
json {Boolean} 是否解析JSON格式,default true
jsonStrict {Boolean} 是否使用json严格模式,true 会只处理数组和对象 true
formidable {Object} 配置更多的关于multipart的选项
onError {Function} 自定义错误响应函数
parsedMethods {String[]} 指明要解析数据的请求方法，默认为 ['POST', 'PUT', 'PATCH'].

koa-bodyparser的使用
这个中间件可以将post请求的参数转为json格式返回

const bodyParser = require('koa-bodyparser')
app.use(bodyParser())

参数配置和koa-body类似，在此就不赘述。

三、koa-static

在网络请求中，请求往往分成两种类型，一种是静态资源，直接从服务器的文件存储中读取，一种是动态资源，一般需要先从数据库获取数据，然后经过一定的处理，最后返回给客户端。
在项目中使用koa-static中间件主要是为了获取服务器上存储的静态图片，将其传递给客户端。具体使用如下：

const koaStatic = require('koa-static')
app.use(koaStatic(root,opt))// root为静态文件路径,opt为相关设置

options的可选值

maxage 浏览器缓存最大期限，默认0
hidden 是否允许传输隐藏文件，默认 false
index 默认文件名为 ‘index.html’
defer 如果为true，则在返回next()之后进行服务，从而允许后续中间件先进行响应
gzip 当客户端支持 gzip 并且存在扩展名为 .gz的请求文件时，是否自动提供文件的 gzip 版本。默认为 true.
setHeaders 在响应时调用的头部设置函数.
extensions 尝试匹配传递的数组中的扩展名，以便在 URL 中没有足够的扩展名时搜索文件，默认为true

四、koa-helmet

koa-helmet通过设置头部来保护应用程序安全的目的。此中间件可以抵御常规的web网络攻击。它提供了11个安全中间件。

csp: 通过设置 Content-Security-Policy 来阻止 XSS 攻击和一些其他的跨站注入风险
hidePoweredBy：删除了 header 中的 X-Powered-By 标签
noCache:设置 Cache-Control 关闭客户端缓存。
hpkp：通过增加 Public key Pinning 来阻止伪造证书导致的中间人攻击。
noSniff: 设置 X-Content-Type-Options 阻止浏览器 MIME-sniffing。
frameguard：设置 X-Frame-Options 阻止点击劫持风险
hsts: 设置 Strict-Transport-Security 来强制安全连接(http over SSL)到服务器（服务器需要支持 https）
ieNoOpen:为 ie8 设置 X-Download-Options
xssFilter: 设置 X-XSS-Protection 启用
使用方式

//统一调用
app.use(helmet());// 局部组件调用
app.use(helmet.contentSecurityPolicy());
app.use(helmet.dnsPrefetchControl());
app.use(helmet.expectCt());

koa工程化项目使用的基本包相关推荐

前端工程化项目的思考
这是一篇个人使用前端工程开发项目的思考,希望可以帮助到你.完全是一篇综合概念应该是很多东西,我也不清楚会有多少字,估计会对刚刚开始的人看起来比较迷,但也是没有办法的事情 1.前端脚本语言开发的作者我想 ...
从零开始搭建口袋妖怪管理系统(4)-借助webpack4.6工程化项目(上)
"手动是不可能手动的了,这辈子都不可能手动的了." 一.目标上一章我们借助ngRoute,完成了口袋妖怪SPA系统的多模块导航开发,但是现在引用的东西越来越多,项目文件目录开始变 ...
将Spring Boot项目打包成jar包war包
任务一:将Spring Boot项目打包成jar包 1.在pom.xml文件中添加依赖 2.通过cmd命令行来进行打包jar包(首先进入项目的目录中) 3.进入项目中的target目录下查看包 4.使 ...
linux上jar包无法识别本地文件格式,解决使用maven将项目打包成jar包后运行在linux系统中无法读取jar包中文件的问题...
哈哈,之前计划的每周至少更新一个博客的计划又因为各种原因都泡汤了.看来坚持真得是一件挺让人头疼的问题,无论如何,从这周开始接下来每周一定要至少更新一个技术博客,欢迎大家监督! 好,言归正传.之前前几周 ...
java poi jar maven_导出maven项目依赖的jar包(图文教程)
注意使用mvn命令是需要配置好maven的环境变量一.导出到自定义目录中在maven项目下创建lib文件夹,输入以下命令: mvn dependency:copy-dependencies -Do ...
Java 技术篇-利用exe4j工具生成exe文件实例演示，IntelliJ IDEA将项目转化为jar包方法，运行生成后的程序弹出exe4j提示处理，生成的程序显示控制台设置方法
Java 项目转化为 exe 可执行文件第一章:IntelliJ IDEA 将项目转化为 jar 包 ① 设置 Artifacts ② 设置是否集成外部 jar 包 ③ 将 java 项目转化为 j ...
jar包打补丁 jar -uf_maven项目引入本地jar包的方法
maven项目引入本地jar包的方法标签:maven 当maven项目中从中央仓库中找到不到某些Jar包,或者想把自己开发的Jar文件引入到项目中使用.可以把Jar包上传maven中央仓库或自建的私 ...
在IDEA中将SpringBoot项目打包成jar包的方法不要用在上面有可以用的
在IDEA中将SpringBoot项目打包成jar包的方法 2018年03月07日 10:43:52 叶叶叶叶大爷阅读数 71375 版权声明: https://blog.csdn.net/qq_3 ...
andriod studio 查看项目依赖_Intellij IDEA 中如何查看maven项目中所有jar包的依赖关系图...
Maven 组件界面介绍如上图标注 1 所示,为常用的 Maven 工具栏,其中最常用的有: 第一个按钮:Reimport All Maven Projects 表示根据 pom.xml 重新载入项 ...

koa工程化项目使用的基本包

文章目录

前言