vue中使用axios请求post接口,请求会发送两次

简介: vue中使用axios请求post接口,请求会发送两次

在vue中使用axios请求post接口,请求会发送两次
image.png

image.png

所有跨域的js在提交post请求的时候,如果服务端设置了可跨域访问都会默认发送两次请求,第一次是预检请求,查询是否支持跨域,第二次才是真正的post提交。JS中出现这个现象原因在于你发送了一个非简单请求。

浏览器分为简单请求以及非简单请求:
跨域请求需要先发一次Option预请求,OPTIONS是检验是否允许跨域的,如果不希望OPTIONS请求, 直接让后端遇到option直接返回就可以了,前端可不做处理。

简单请求:

以下三项必须都成立:

  1. 只能是Get、Head、Post方法

  2. 除了浏览器自己在Http头上加的信息(如Connection、User-Agent),开发者只能加这几个:Accept、Accept-Language、Content-Type、。。。。

  3. Content-Type只能取这几个值:

application/x-www-form-urlencoded
multipart/form-data
text/plain
AI 代码解读

只有同时满足以上条件时,才是简单请求,否则为非简单请求

目录
打赏
560
61
61
36
798
分享
相关文章
前端解决axios请求的跨域问题【2步完成】
本文介绍如何通过前端配置解决跨域问题,主要针对Vue项目中的`vite.config.js`文件进行修改。作者在联调过程中遇到跨域报错
56 1
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
91 2
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
374 4
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
65 0
axios取消请求CancelToken的原理解析及用法示例
axios取消请求CancelToken的原理解析及用法示例
391 0
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
这篇文章主要讨论了axios的使用、原理以及源码分析。 文章中首先回顾了axios的基本用法,包括发送请求、请求拦截器和响应拦截器的使用,以及如何取消请求。接着,作者实现了一个简易版的axios,包括构造函数、请求方法、拦截器的实现等。最后,文章对axios的源码进行了分析,包括目录结构、核心文件axios.js的内容,以及axios实例化过程中的配置合并、拦截器的使用等。
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
【Vue面试题二十七】、你了解axios的原理吗?有看过它的源码吗?
文章讨论了Vue项目目录结构的设计原则和实践,强调了项目结构清晰的重要性,提出了包括语义一致性、单一入口/出口、就近原则、公共文件的绝对路径引用等原则,并展示了单页面和多页面Vue项目的目录结构示例。