服务器搭建：
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、