使用axios和Koaji进行post传输数据

前端

使用axios发送前端post请求到后端，url为后端服务器地址

axios({method: \'post\',url: \'http://localhost:3000/login\',data: { name: this.user.username,email: this.user.email,password: this.user.password}}).then(res => {console.log(this.data)console.log(res)if (res.data.status === 200) {} else {alert(\'您输入的用户名已存在！\')}})

由于后端端口号3000，受同源策略影响，须在后端进行cors插件的设置，这里采用koa2-cors

const cors = require(\'koa2-cors\')

使用中间件进行一些基本的配置

app.use(cors({origin: function (ctx) {if (ctx.url === \'/test\') {return \'*\' // 允许来自所有域名请求}return \'http://localhost:8080\'},exposeHeaders: [\'WWW-Authenticate\', \'Server-Authorization\'],maxAge: 5,credentials: true,allowMethods: [\'GET\', \'POST\', \'DELETE\'],allowHeaders: [\'Content-Type\', \'Authorization\', \'Accept\']}))

后端使用post路由接收即可，注意将对象转换为json数据

router.post(\'/login\', koaBody(), async (ctx) => {console.log(ctx.request.body)let user = JSON.stringify(ctx.request.body)console.log(user)})

这里在项目中遇见一个巨坑，因为前端请求方式是application/json而koa-bodyparser插件不识别！！！
所以一定要改用koa-body插件代替，且把body-parser注释掉，防止不必要的麻烦

// const bodyParser = require(\'koa-bodyparser\')const koaBody = require(\'koa-body\')

在路由中koaBody()即可使用

router.post(\'/login\', koaBody(), async (ctx) => {})

这样，一个简单的前后端交互就完成啦，放心玩耍吧