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.mfbz.cn/a/449527.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Covalent(CQT)降低数据可用性成本,加快 Layer2 在 Web3 领域的扩张

Covalent Network(CQT)通过其统一 API,正在为 EVM Layer2 生态系统提供支持,减少了开发者需要导航多个数据供应商的需求,通过解决多链环境中的碎片化挑战,极大地提高了他们的效率。 通过其统一 API 支持 2…

pandas plot函数:数据可视化的快捷通道

一般来说,我们先用pandas分析数据,然后用matplotlib之类的可视化库来显示分析结果。而pandas库中有一个强大的工具--plot函数,可以使数据可视化变得简单而高效。 1. plot 函数简介 plot函数是pandas中用于数据可视化的一个重要工具&#xff0…

Tomcat Web 开发项目构建教程

1下载Tomcat安装包,下载链接:Apache Tomcat - Welcome!,我电脑环境为JDK8,所以下载Tomcat9.0 2、下载完压缩包后,解压到指定位置 3.在intelij中新建一个项目 4.选中创建的项目,双击shift,输入add frame...然…

安卓studio安装(从安装到配置到helloworld)

安卓studio安装 2024.3.11官网的版本(有些翻墙步骤下载东西也解决了) 这次写的略有草率,后面会更新布局的,因为截图量太大了,有需要的小伙伴可以试着接受一下哈哈哈哈 !(https://gitee.com/jiuzheyangbawjf/img/raw/ma…

报名开启丨掘金海外,探寻泛娱乐社交APP出海新风口

随着国内泛娱乐行业用户规模趋于见顶,泛娱乐社交APP转向出海是必然趋势。 根据行业数据显示,有超过35%的国内实时社交企业已启动或者正在规划出海,而其中出海商户的音视频流量增长均超过了100%。尤其是在东南亚、中东、拉美等新兴…

【Linux】文件缓冲区|理解文件系统

目录 预备知识 观察现象 第一:携带\n,不使用fork(),打印到显示器 第二:携带\n,使用fork(),打印到显示器 第三:携带\n,使用fork(),打印到文件里 第四:不携…

Aspose.Words指定位置插入table

如果在创建书签,然后在书签位置插入表格,会出现格式错乱,在单元格位置里面有一个表格,不符合实际使用。正确做法是复制模板文件里面的表格行,然后插入若干行。 如图标记红色位置插入动态数据行,是先复制标…

C# OpenCvSharp 图片批量改名

目录 效果 项目 代码 C# OpenCvSharp 图片批量改名 效果 项目 代码 using NLog; using OpenCvSharp; using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Windows.Forms; namespace OpenCvSharp_Demo { public part…

Pytorch_lightning先前版本的官方文档地址

https://lightning.ai/docs/pytorch/1.4.2/https://lightning.ai/docs/pytorch/1.4.2/ Pytorch_lightning更新到2后,和之前版本的变化较大,一些以前原有的api被删除了 比如:on_pretrain_routine_start 官方也没有在显眼的位置放置先前版本的…

【机器学习智能硬件开发全解】(一)—— 政安晨:从深度认知开始

从深刻认知开始 作者政安晨依据自身多年研发经验,本着成过的功与踩过的坑都是浮云的态度,为各位小伙伴们进行一个系列的智能硬件开发领域的示范解析,让对智能硬件感兴趣的小伙伴们少走弯路。 这是一路走一路全是干货的文章系列,…

基础的渗透测试

信息收集漏洞挖掘获取shell phpadmin文件上传与文件包含 对某一个网站的渗透 专注于web漏洞挖掘、内网渗透、免杀和代码审计,感谢各位师傅的关注!网安之路漫长,与君共勉! 信息收集 简单的进行一下信息收集,goby工具走一…

【工具】Jmeter安装入门

目录 前言 安装Jmeter 1.1 下载Jmeter 1.2 解压 1.3 运行 快速入门 2.1 设置中文语言 2.2 外观(主题)设置 2.3 基本用法 前言 1W:什么是 Jmeter ? Jmeter 是一个用于进行性能测试、负载测试和功能测试的开源工具。最初为 Web 应用程序设计&#…

【已解决】git无法上传大于100MB问题

问题: 输入命令 git config http.postBuffer 524288000 查看命令 git config -l

C语言——指针全讲

1、指针是什么:数据存于内存中,CPU如果要对数据进行处理首先就要找到相对应的数据,就是通过地址来找到的。就像你所在的公寓,你如果要找到你的房间就需要根据门牌号寻找。 在CPU和内存之间有地址线连接,其中在x86环境下…

Socket通信Demo(Unity客户端和C#)

Socket通信基本流程 首先要启动服务器创建Socket,然后要绑定服务器的一个端口这样客户端通过服务器IP端口号就能连接到服务器了服务器接下来会设置监听队列,监听并等待要连接到它的客户端客户端在服务器启动之后也建立自己的Socket,然后使用…

2 月 Web3 游戏行业动态

作者:stellafootprint.network 数据来源:区块链游戏研究页面 - Footprint Analytics 2024 年 2 月,区块链游戏领域在加密货币价格上涨和活跃用户激增的推动下,实现了显著增长。然而,行业在维持用户参与度和留存率方面…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:NavRouter)

导航组件,默认提供点击响应处理,不需要开发者自定义点击事件逻辑。 说明: 该组件从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 子组件 必须包含两个子组件,其中第二个子组…

搭建交换机模拟环境及SSH连接,华为NSP软件入门使用教程

搭建交换机模拟环境及SSH连接,华为NSP软件入门使用教程 如果你是通过搜索搜到了这篇文章,那么一定是工作或者学习中需要用交换机,但是又没物理机测试学习,所以需要搭建本地的虚拟环境学习。 这篇文章是我进行交换机命令入门学习写…

在 windows 下安装并调试 CMake

一、前言 CMake是一个跨平台的开源工具,用于管理软件项目的构建过程。它不直接构建软件,而是生成用于特定平台或编译器的构建文件(如Makefile或Visual Studio项目文件),然后利用这些文件来实际构建软件。 二、初次尝…

026—pandas 根据文本数据提取特征

前言 在数据处理中,源数据可能具有一定便于记录但又复杂的结构,我们在后续使用数据时还需要进一步进行处理。在本例中,要根据一列数据提取出数据中的相关特征,我们来看看 pandas 是如何完成的。 需求: 以上数据的 a …