前端请求后端数据,难免会遇到如下几个问题:

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())

在文件上传的接口上单独使用(home.js)
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中间件来解析数据(包括文件).

注:另外还有koa-better-body中间件,我没测试,不知道是不是能够解决和koa2-cors中间件的冲突问题和支持文件上传.
 
 

koa2数据请求相关问题解决方案汇总的更多相关文章

  1. hadoop、spark/storm等大数据相关视频资料汇总下载

    小弟不才,工作中也用到了大数据的相关东西.一開始接触的时候,是通过买来的教学视频入的门.这两天整理了一下自己的视频资料.供各位进行下载. 文档截图:

  2. 分布式事务解决方案汇总:2PC、3PC、消息中间件、TCC、状态机+重试+幂等(转)

    数据一致性问题非常多样,下面举一些常见例子.比如在更新数据的时候,先更新了数据库,后更新了缓存,一旦缓存更新失败,此时数据库和缓存数据会不一致.反过来,如果先更新缓存,再更新数据库,一旦缓存更新成功, ...

  3. Android WebView常见问题及解决方案汇总

    Android WebView常见问题解决方案汇总: 就目前而言,如何应对版本的频繁更新呢,又如何灵活多变地展示我们的界面呢,这又涉及到了web app与native app之间孰优孰劣的争论. 于是 ...

  4. Android UI相关开源项目库汇总

    最近做了一个Android UI相关开源项目库汇总,里面集合了OpenDigg 上的优质的Android开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个st ...

  5. Android之Android WebView常见问题及解决方案汇总

    如有转载,请声明出处: 时之沙: http://blog.csdn.net/t12x3456 Android WebView常见问题解决方案汇总: 就目前而言,如何应对版本的频繁更新呢,又如何灵活多变 ...

  6. SpringBoot系列教程web篇之Post请求参数解析姿势汇总

    作为一个常年提供各种Http接口的后端而言,如何获取请求参数可以说是一项基本技能了,本篇为<190824-SpringBoot系列教程web篇之Get请求参数解析姿势汇总>之后的第二篇,对 ...

  7. koa2做请求转发

    最近用koa2做请求转发时,采用了request(options).pipe(ctx.res)的方法,结果出现了有时候前端获得的数据是分片的. 后来翻阅文档,采取了如下方式解决: const Pass ...

  8. RTSP协议媒体数据发包相关的细节

    最近完成了一RTSP代理网关,这是第二次开发做RTSP协议相关的开发工作了,相比11年的简单粗糙的版本,这次在底层TCP/IP通讯和RTSP协议上都有了一些新的积累,这里记录一下.基本的RTSP协议交 ...

  9. iOS - NetRequest 网络数据请求

    1.网络请求 1.1 网络通讯三要素 1.IP 地址(主机名): 网络中设备的唯一标示.不易记忆,可以用主机名(域名). 1) IP V4: 0~255.0~255.0~255.0~255 ,共有 2 ...

随机推荐

  1. c#客户端自动更新模块

    一.概述 将需要更新的文件上传到服务器端,然后客户端从服务器下载更新文件并覆盖本地文件. 二.功能模块 1.将更新文件放入指定文件夹,检测更新,生成更新配置文件,并上传到服务器 2.获取服务器的更新配 ...

  2. 这个是自定义的代码块在xcode中的路径

    ~/Library/Developer/Xcode/UserData/CodeSnippets

  3. springmvc处理一个请求的全流程

    首先,用户的浏览器发出了一个请求,这个请求经过互联网到达了我们的服务器. Servlet 容器首先接待了这个请求,并将该请求委托给 DispatcherServlet 进行处理. 接着 Dispatc ...

  4. 09 深科技相关表结构 (未完成)、git

    1.深科技相关 1. 深科技表结构(6表) 深科技4张+2张用户表 - 深科技 用户表 用户Token 文章来源 文章表 通用评论表 通用收藏表 # ######################## ...

  5. HDU 6061 - RXD and functions | 2017 Multi-University Training Contest 3

    每次NTT都忘记初始化,真的是写一个小时,Debug两个小时- - /* HDU 6061 - RXD and functions [ NTT ] | 2017 Multi-University Tr ...

  6. ubuntu系统升级PHP版本

    https://blog.csdn.net/qq_16885135/article/details/79747045    升级PHP7.2 https://www.cnblogs.com/lalal ...

  7. 【CUDA 基础】5.2 共享内存的数据布局

    title: [CUDA 基础]5.2 共享内存的数据布局 categories: - CUDA - Freshman tags: - 行主序 - 列主序 toc: true date: 2018-0 ...

  8. node 中的global对象和process对象

    官方文档:http://nodejs.cn/api/ 因为Node.js是运行在服务区端的JavaScript环境,服务器程序和浏览器程序相比,最大的特点是没有浏览器的安全限制了,而且,服务器程序必须 ...

  9. Django基础之JsonResponse对象

    JsonResponse是HttpResponse的子类, 专门用来生成JSON编码的响应. from django.http import JsonResponse response = JsonR ...

  10. 测试Promise与Async/await的基本使用

    想在项目中用, 发现自己不是很熟 promise基本使用 基本使用-思路 new Promise()返回了一个状态机 一个完全无法被外界影响的状态机 构造函数, 传入一个函数, 两个参数, 分别是re ...