Axios中每次发送post请求前都会发送options请求

今天写前端的时候，发现每次post请求都会失败， 反复调试过后发现axios在每次发送post请求前都发送了options请求， 在网络搜罗了一大圈， 发现了原因是因为web页面发送了请求给vue后， vue再请求后端过程中发生了跨域， 而我使用的不是默认的跨域允许请求头， 而是content-type: application/json， 所以浏览器认为跨域即是不可靠行为， 所以每次都需要发送options请求， 进行跨域检测， 所以导致了每次options请求失败了， 所以post请求就没有下文了。

问题来了， 之前我也用vue+axios写了前端， 为什么不会出现这样的情况呢？

首先我以为是配置的问题， 把axios拦截器里面的content-type改成了application/x-www-form-urlencoded， 结果发现确实不会再options的， 但是之前用的时候， 也跨域了， 但是却没有出现options。

然后我以为是axios的版本问题， 就把axios从1.6.5降到了之前写的时候的1.6.2， 结果发现问题依旧，说明问题和版本无关。

然后就想到了， 问题是基于跨域引起的， 那是不是因为后端没有设置跨域呢？ 但是之前用Django写的后台也没有带跨域设置， Goframe应该也不用才对？

抱着试一试的态度， 搜索了下GoFrame怎么设置跨域， 其实很简单， GoFrame已经帮我们做了封装， 在中间件中加入一个允许跨域的方法就行了。

func MiddlewareHandlerResponse(r *ghttp.Request) {
    r.Response.CORSDefault()
    r.Middleware.Next()
}

然后在你的cmd中加入中间件即可

var (
    Main = gcmd.Command{
        Name:  "main",
        Usage: "main",
        Brief: "start http server",
        Func: func(ctx context.Context, parser *gcmd.Parser) (err error) {
            s := g.Server()
            s.Use(MiddlewareHandlerResponse)

            s.Group("/api", func(group *ghttp.RouterGroup) {
                group.Group("/v1", func(group *ghttp.RouterGroup) {
                    group.Bind(hb.NewV1())
                })
            })
            s.Run()
            return nil
        },
    }
)

然后再次进行尝试， 问题解决了。

仔细对照了一下， 后端加入了跨域后， 响应头多了如下几个请求头

也就是多了一些允许跨域的设置， 这也是GoFrame帮忙封装的， 并且在源码中， 我们可以看到它针对OPTIONS请求都做了处理的。

func (r *Response) CORS(options CORSOptions) {
    if r.CORSAllowedOrigin(options) {
        r.Header().Set("Access-Control-Allow-Origin", options.AllowOrigin)
    }
    if options.AllowCredentials != "" {
        r.Header().Set("Access-Control-Allow-Credentials", options.AllowCredentials)
    }
    if options.ExposeHeaders != "" {
        r.Header().Set("Access-Control-Expose-Headers", options.ExposeHeaders)
    }
    if options.MaxAge != 0 {
        r.Header().Set("Access-Control-Max-Age", gconv.String(options.MaxAge))
    }
    if options.AllowMethods != "" {
        r.Header().Set("Access-Control-Allow-Methods", options.AllowMethods)
    }
    if options.AllowHeaders != "" {
        r.Header().Set("Access-Control-Allow-Headers", options.AllowHeaders)
    }
    // No continue service handling if it's OPTIONS request.
    // Note that there's special checks in previous router searching,
    // so if it goes to here it means there's already serving handler exist.
    if gstr.Equal(r.Request.Method, "OPTIONS") {
        if r.Status == 0 {
            r.Status = http.StatusOK
        }
        // No continue serving.
        r.Request.ExitAll()
    }
}