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.…

数据分析入门,深入浅出的数据分析

时下正值大数据与人工智能高速发展的时刻,相信很多对数据分析感兴趣的朋友想要转行。很多朋友选择从事数据分析,主要是看到这个岗位的发展前景和薪资待遇。 但是一些小伙伴并不知道数据分析到底是做什么的?需要用到哪些知识? 为…

【Flink SQL】Flink SQL 基础概念:SQL Table 运行环境、基本概念及常用 API

Flink SQL 基础概念:SQL & Table 运行环境、基本概念及常用 API 1.SQL & Table 简介及运行环境1.1 简介1.2 SQL 和 Table API 运行环境依赖 2.SQL & Table 的基本概念及常用 API2.1 一个 SQL / Table API 任务的代码结构2.2 SQL 上下文:Tabl…

linux部署服务相关基础操作:磁盘挂载、jdk安装、docker安装、docker-compose环境安装、mysql、redis、jenkins等

磁盘挂载 1、运行mount查看数据盘挂载信息。返回结果中没有/dev/vdb1的信息。 2、运行fdisk -l查看数据盘分区信息。 3、格式化磁盘 mkfs -t ext4 /dev/vdb3.1、 (格式化后这一步跳过)运行cat /etc/fstab查看数据盘分区/dev/vdb1原有的挂载点名称。 4、运行mkdir /data重新…

[python3] 责任链模式

责任链模式(Chain of Responsibility Pattern)是一种行为设计模式,它允许多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系。请求沿着链传递,直到有一个对象处理它为止。 下面是一个简单的 Pyth…

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%。 与去年…

PHP使用 enqueue/amqp-lib拓展实现rabbitmq任务处理

一:拓展安装 composer require enqueue/amqp-lib 文档地址:https://github.com/php-enqueue/enqueue-dev/blob/master/docs/transport/amqp_lib.md 二:方法介绍 1:连接rabbitmq $factory new AmqpConnectionFactory([host &…

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

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

如何在 Unity 中创建简单的多人游戏

在本文中,我将向你展示如何将 Mirror 添加到 Unity 项目中,并创建一个简单的多人游戏。你还可以从 GitHub下载项目文件。Mirror 是一个网络库,可让你在 Unity 中轻松创建多人游戏。它是免费的、开源的,实际上是 UNET(Unity 自己已弃用的网络 API)的一个分支。 游戏 每个…