Goframe因为axios的header导致的一个BUG解析

服务器搭建：

go mod init test

go mod edit -require github.com/gogf/gf@latest

复制代码
package main

import (
    "fmt"

    "github.com/gogf/gf/v2/frame/g"
    "github.com/gogf/gf/v2/net/ghttp"
)

func main() {
    s := g.Server()
    s.Group("/api", func(group *ghttp.RouterGroup) {
        group.Middleware(MiddlewareCORS)
        // 后台模块
        group.ALL("/test", List)
    })
    s.Run()
}

// MiddlewareCORS 允许跨域
func MiddlewareCORS(r *ghttp.Request) {
    r.Response.CORSDefault()
    r.Middleware.Next()
}

func List(r *ghttp.Request) {
    fmt.Println(r.Get("name"))
    r.Response.Write("hello world")
}
复制代码

启动服务

 

 

前端使用anxis

main.js

package.json

webpack.config.js

 

复制代码
import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';

Vue.use(VueAxios, axios)

// Vue.axios.get("http://localhost/api/test").then((response) => {
//   console.log(response.data)
// })

axios({
  headers: {
    // application/json ： 请求体中的数据会以json字符串的形式发送到后端
    // application/x-www-form-urlencoded：请求体中的数据会以普通表单形式（键值对）发送到后端
    // multipart/form-data： 它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。
    'Content-Type': 'multipart/form-data' //参数为object时候请求体中的数据会以普通表单形式（键值对）发送到后端
  },
  method: 'post',
  url: 'http://localhost/api/test',
  data: {
    name: {
      'test': 'hello'
    },
  }
});
复制代码

以上请求将会直接panic ： 

Invalid Request: no multipart boundary param in Content-Type

 

复制代码
const path = require('path');

module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.bundle.js',
  },
};
复制代码
复制代码
{
  "scripts": {
    "build": "webpack"
   },
  "dependencies": {
    "axios": "^0.24.0",
    "vue-axios": "^3.4.0",
    "webpack": "^5.4.0",
     "webpack-cli": "^4.2.0"
  }
}
复制代码

 

执行 

npm install

npm run build 

生成 main.bundle.js

在浏览器console执行

发送请求；

 

以上需要搞懂：

1、What is the boundary in multipart/form-data?

https://stackoverflow.com/questions/3508338/what-is-the-boundary-in-multipart-form-data?answertab=votes#tab-top

2、axios使用multipart/form-data方式上传文件？

https://github.com/wangsijie/blog/issues/67

3、 

 

 

 

 

 

posted @   许伟强  阅读(293)  评论(0)  编辑  收藏  举报
相关博文：
· Golang使用http发送请求遇到的一个坑
· Golang转发请求
· apisix~自定义文件上传代理插件~支持form-data文件和kv参数
· 记一次ElementUI上传文件，Current request is not a multipart request与the request was rejected because no multipart boundary was found
· go标准库http包创建multipart/form
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 记一次.NET内存居高不下排查解决与启示
历史上的今天：
2021-01-11 关于vue的$refs出现undefined
2021-01-11 关于vue表单Element表单验证事件初次加载就触发了校验的问题 - 如何清除验证结果
点击右上角即可分享
微信分享提示