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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/738208.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【算法】一维前缀和以及二维前缀和

目录 一维前缀和适用场景示例 二维前缀和适用场景一种情况另一种情况示例 一维前缀和 适用场景 求一段区间的和。 比如有一个数列 : 如果我们要求 [l,r]即某个区间内的数组和的时候,思路就是每遍历一个元素就进行求和,记录下加到al时的和…

Skywalking

1、简介 Skywalking是由国内开源爱好者吴晟开源并提交到Apache孵化器的开源项目, 2017年12月SkyWalking成为Apache国内首个个人孵化项目, 2019年4月17日SkyWalking从Apache基金会的孵化器毕业成为顶级项目, 目前SkyWalking支持Java、 .Net、 …

广告主投放系统从设计到实践

在当今数字广告行业中,广告主投放系统扮演着至关重要的角色。它是连接广告主和广告媒体之间的桥梁,帮助广告主实现广告投放目标并获得可观的回报。本篇博客文章将深入探讨广告主投放系统的设计和实践过程,并分享一些关键的经验和最佳实践。 …

flink的分组聚合、over聚合、窗口聚合对比

【背景】 flink有几种聚合,使用上是有一些不同,需要加以区分: 分组聚合:group agg over聚合:over agg 窗口聚合:window agg 省流版: 触发计算时机 结果流类型 状态大小 分组聚合group ag…

使用OpenCV实现两张图像融合在一起

简单介绍 图像融合技术是一种结合多个不同来源或不同传感器捕获的同一场景的图像数据,以生成一幅更全面、更高质量的单一图像的过程。这种技术广泛应用于遥感、医学影像分析、计算机视觉等多个领域。常见的图像融合技术包括基于像素级、特征级和决策级的融合方法&a…

基与HTML5的塔防游戏设计与实现

目 录 摘 要 I Abstract II 引 言 1 1 项目背景与相关技术 3 1.1 背景与发展简介 3 1.2 HTML5技术及其优势 4 1.3 JavaScript开发的优势与劣势 4 1.4 CSS样式表在开发中的用处 5 1.5 本章小结 6 2 系统分析 7 2.1 需求分析 7 2.2 问题分析 7 2.3 流程设计 7 2.3 功能分析 8 2.…

Linux---多线程(上)

一、线程概念 线程是比进程更加轻量化的一种执行流 / 线程是在进程内部执行的一种执行流线程是CPU调度的基本单位,进程是承担系统资源的基本实体 在说线程之前我们来回顾一下进程的创建过程,如下图 那么以进程为参考,我们该如何去设计创建一个…

paddle的版面分析的环境搭建及使用

一、什么是版面分析 版面分析技术,主要是对图片形式的文档进行版面分析,将文档划分为文字、标题、表格、图片以及列表5类区域,如下图所示: 二、应用场景 2.1 合同比对 2.2 文本类型划分 2.3 通用文档的还原 版面分析技术可将以…

论文阅读FCN-Transformer Feature Fusion for PolypSegmentation

本文提出了一种名为Fully Convolutional Branch-TransFormer (FCBFormer)的图像分割框架。该架构旨在结合Transformer和全卷积网络(FCN)的优势,以提高结肠镜图像中息肉的检测和分类准确性。 1,框架结构: 模型采用双分…

【Python】牛客网—软件开发-Python专项练习

专栏文章索引:Python 1.(单选)下面哪个是Python中不可变的数据结构? A.set B.list C.tuple D.dict 可变数据类型:列表list[ ]、字典dict{ }、集合set{ }(能查询,也可更改)数据发生改…

Golang 开发实战day03 - Arrays Slices

Golang 教程03 - Arrays,Slices Go语言中的数组和切片都是用于存储数据的类型,但它们之间存在一些重要的区别。了解这些区别对于有效地使用它们至关重要。 1. Arrays 数组 1.1 定义 数组是一种固定大小的数据结构,用于存储相同类型的值。…

广西省行政村边界shp数据/广西省乡镇边界/广西省土地利用分类数据/径流分布

广西壮族自治区,地处中国南部,北回归线横贯中部。南北以贺州——东兰一线为界,此界以北属中亚热带季风,以南属南亚热带季风。 数据范围:全国行政区划-行政村界 数据类型:面状数据,全国各省市县…

1月笔记本电脑行业分析:多品牌下滑但ThinkPad逆势增长!

2024年1月,笔记本行业市场格局出现较大的变化。长期在京东平台保持头部联想和惠普,被ThinkPad挤下(虽然是联想旗下品牌),排名掉至第二和第三。ThinkPad以超2.7亿的月销售额成绩拿下第一,市占比16%。 与去年…

java SSM农产品订购网站系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM农产品订购网站系统是一套完善的web设计系统(系统采用SSM框架进行设计开发,springspringMVCmybatis),对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采…

算法-贪心-112. 雷达设备

题目 假设海岸是一条无限长的直线,陆地位于海岸的一侧,海洋位于另外一侧。 每个小岛都位于海洋一侧的某个点上。 雷达装置均位于海岸线上,且雷达的监测范围为 d,当小岛与某雷达的距离不超过 d 时,该小岛可以被雷达覆…

大语言模型:Large Language Models Are Human-Level Prompt Engineers概述

研究内容 如何通过prompt,在不进行微调大语言模型的前提下,增加大语言模型的表现 研究动机 prompt非常有用,但是人工设置的非常不自然;因此提出了要自动使用大语言模型自己选择prompt;取得了很好的效果。 作者主要…

python实现生成树

生成树 生成树(Spanning Tree)是一个连通图的生成树是图的极小连通子图,它包含图中的所有顶点,并且只含尽可能少的边。这意味着对于生成树来说,若砍去它的一条边,则会使生成树变成非连通图;若给…

Git LFS【部署 01】Linux环境安装git-lfs及测试

Linux系统安装git-lfs及测试 1.下载2.安装3.测试4.总结 Git LFS(Large File Storage)是一个用于Git版本控制系统的扩展,它专门用来管理大型文件,如图像、音频和视频文件。 1.下载 安装包下载页面:https://github.com/…

web3D三维引擎(Direct3D、OpenGL、UE、U3D、threejs)基础扫盲

Hi,我是贝格前端工场的老司机,本文介绍文web3D的几个引擎,做个基础扫盲,如果还不能解决问题,可以私信我,搞私人订制呦。 三维引擎是指用于创建和渲染三维图形的软件框架。它们通常提供了图形处理、物理模拟…

AIGC: 2 语音转换新纪元-Whisper技术在全球客服领域的创新运用

背景 现实世界,人跟人的沟通相当一部分是语音沟通,比如打电话,聊天中发送语音消息。 而在程序的世界,大部分以处理字符串为主。 所以,把语音转换成文字就成为了编程世界非常普遍的需求。 Whisper 是由 OpenAI 开发…