koa2数据请求相关问题解决方案汇总
前端请求后端数据,难免会遇到如下几个问题:
1⃣️跨域
2⃣️post/get,其中post请求的方式又分为多种
3⃣️后端数据返回格式(上一篇已经有讨论过,这里不再赘述)
用koa2的话,如何解决这些问题呢?
一、跨域
前端项目跑在localhost:8080,后端服务跑在localhost:1996
这里使用跨域中间件就能解决上述跨域问题
二、post请求数据解析的问题
期间使用了koa-bodyparse中间件,但是对于表单数据,不能解析,还要依赖其他中间件;
后来发现koa-body中间件可以解析所有类型的post请求,包括通过表单提交的文件(后续有bug)
koaBody函数里面的参数是用来配置文件上传的.
app.js:
需要注意的是,onFileBegin函数里面对文件名做了处理(保持原有文件名),如果不处理的话,默认上传文件的文件名将会是这样:
配置好koa-body中间件之后,下面来测试一下(使用了自定义的formatresponse中间件来格式化响应数据):
2.1 get
get请求后台通过ctx.query获取请求参数
2.2 post_multipart/form-data
根据之前koaBody中间件的设置,该请求携带的文件已经上传到指定文件夹了.
2.3 post_application/json
后台通过ctx.request.body获取请求参数
哦嚯,跨域?不是已经设置的跨域么?
后来经过多方查阅,好像别人用 koa-body 都没有出现这个问题,只有我用的时候出了这个bug?
最终解决方案:
全局使用(app.js)
app.use(bodyParser())
const koaBody = require('koa-body');
const path = require('path') var uploadConfig = koaBody({
multipart:true, // 支持文件上传
encoding:'gzip',
json:true,
formidable:{
uploadDir:path.join(path.resolve(__dirname, '..'),'public/upload/'), // 设置文件上传目录
keepExtensions: true, // 保持文件的后缀
maxFieldsSize: * * , // 文件上传大小
onFileBegin:(name,file) => { // 文件上传前的设置
// console.log(`name: ${name}`);
// console.log(file);
// 最终要保存到的文件夹目录
const dir = path.join(path.resolve(__dirname, '..'),`public/upload/`);
// 重新覆盖 file.path 属性
file.path = `${dir}/${file.name}`;
},
}
}) home.post('/upload',uploadConfig,async (ctx) => {
//获取post请求数据
var files = ctx.request.files;
var data = ctx.request.body;
response.success(ctx,'文件上传成功!');
})
这样的话,非文件上传的post请求会走koa-bodyparser中间件,与全局的koa2-cors中间件不会冲突;
文件上传的接口走完koa-bodyparser和koa2-cors之后,到接口内部通过koa-body中间件来解析数据(包括文件).
koa2数据请求相关问题解决方案汇总的更多相关文章
- hadoop、spark/storm等大数据相关视频资料汇总下载
小弟不才,工作中也用到了大数据的相关东西.一開始接触的时候,是通过买来的教学视频入的门.这两天整理了一下自己的视频资料.供各位进行下载. 文档截图:
- 分布式事务解决方案汇总:2PC、3PC、消息中间件、TCC、状态机+重试+幂等(转)
数据一致性问题非常多样,下面举一些常见例子.比如在更新数据的时候,先更新了数据库,后更新了缓存,一旦缓存更新失败,此时数据库和缓存数据会不一致.反过来,如果先更新缓存,再更新数据库,一旦缓存更新成功, ...
- Android WebView常见问题及解决方案汇总
Android WebView常见问题解决方案汇总: 就目前而言,如何应对版本的频繁更新呢,又如何灵活多变地展示我们的界面呢,这又涉及到了web app与native app之间孰优孰劣的争论. 于是 ...
- Android UI相关开源项目库汇总
最近做了一个Android UI相关开源项目库汇总,里面集合了OpenDigg 上的优质的Android开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个st ...
- Android之Android WebView常见问题及解决方案汇总
如有转载,请声明出处: 时之沙: http://blog.csdn.net/t12x3456 Android WebView常见问题解决方案汇总: 就目前而言,如何应对版本的频繁更新呢,又如何灵活多变 ...
- SpringBoot系列教程web篇之Post请求参数解析姿势汇总
作为一个常年提供各种Http接口的后端而言,如何获取请求参数可以说是一项基本技能了,本篇为<190824-SpringBoot系列教程web篇之Get请求参数解析姿势汇总>之后的第二篇,对 ...
- koa2做请求转发
最近用koa2做请求转发时,采用了request(options).pipe(ctx.res)的方法,结果出现了有时候前端获得的数据是分片的. 后来翻阅文档,采取了如下方式解决: const Pass ...
- RTSP协议媒体数据发包相关的细节
最近完成了一RTSP代理网关,这是第二次开发做RTSP协议相关的开发工作了,相比11年的简单粗糙的版本,这次在底层TCP/IP通讯和RTSP协议上都有了一些新的积累,这里记录一下.基本的RTSP协议交 ...
- iOS - NetRequest 网络数据请求
1.网络请求 1.1 网络通讯三要素 1.IP 地址(主机名): 网络中设备的唯一标示.不易记忆,可以用主机名(域名). 1) IP V4: 0~255.0~255.0~255.0~255 ,共有 2 ...
随机推荐
- c#客户端自动更新模块
一.概述 将需要更新的文件上传到服务器端,然后客户端从服务器下载更新文件并覆盖本地文件. 二.功能模块 1.将更新文件放入指定文件夹,检测更新,生成更新配置文件,并上传到服务器 2.获取服务器的更新配 ...
- 这个是自定义的代码块在xcode中的路径
~/Library/Developer/Xcode/UserData/CodeSnippets
- springmvc处理一个请求的全流程
首先,用户的浏览器发出了一个请求,这个请求经过互联网到达了我们的服务器. Servlet 容器首先接待了这个请求,并将该请求委托给 DispatcherServlet 进行处理. 接着 Dispatc ...
- 09 深科技相关表结构 (未完成)、git
1.深科技相关 1. 深科技表结构(6表) 深科技4张+2张用户表 - 深科技 用户表 用户Token 文章来源 文章表 通用评论表 通用收藏表 # ######################## ...
- HDU 6061 - RXD and functions | 2017 Multi-University Training Contest 3
每次NTT都忘记初始化,真的是写一个小时,Debug两个小时- - /* HDU 6061 - RXD and functions [ NTT ] | 2017 Multi-University Tr ...
- ubuntu系统升级PHP版本
https://blog.csdn.net/qq_16885135/article/details/79747045 升级PHP7.2 https://www.cnblogs.com/lalal ...
- 【CUDA 基础】5.2 共享内存的数据布局
title: [CUDA 基础]5.2 共享内存的数据布局 categories: - CUDA - Freshman tags: - 行主序 - 列主序 toc: true date: 2018-0 ...
- node 中的global对象和process对象
官方文档:http://nodejs.cn/api/ 因为Node.js是运行在服务区端的JavaScript环境,服务器程序和浏览器程序相比,最大的特点是没有浏览器的安全限制了,而且,服务器程序必须 ...
- Django基础之JsonResponse对象
JsonResponse是HttpResponse的子类, 专门用来生成JSON编码的响应. from django.http import JsonResponse response = JsonR ...
- 测试Promise与Async/await的基本使用
想在项目中用, 发现自己不是很熟 promise基本使用 基本使用-思路 new Promise()返回了一个状态机 一个完全无法被外界影响的状态机 构造函数, 传入一个函数, 两个参数, 分别是re ...