关于axios会发送两次请求，有个OPTIONS请求的问题

weij 发布于2019-08-26 12:13 / 3496人阅读

当时项目为了解决这个问题自闭了一个下午.....上网找了很多的文章看，几乎都没有根治方法，但是最后还是被我搞定了
[]~(￣▽￣)~*　

问题描述：

Vue的开发者都知道axios，很多都用axios来进行数据交互，axios的默认请求头是Content-Type: application/json
使用这个请求头会出现向服务器请求两次的情况
为什么呢？

原因是：浏览器会首先使用 OPTIONS 方法发起一个预请求，判断接口是否能够正常通讯，如果不能就不会发送真正的请求过来，如果测试通讯正常，则开始真正的请求。

大概意思就是：
浏览器对后台说：我可以请求你吗？ (￣ˇ￣)　
后台说：阔以。(￣▽￣)~*
结果是：发送原有的POST请求
后台说：不阔以。(‵﹏′)
结果是：报错

那么这样每个请求都会发送两次，无形加重了服务器的负担（如果服务器特厉害就当我没说），网上有的解决办法是让后台允许options请求，但是并不返回任何数据，那么就不会报错，可是这样治标不治本，浏览器还是来撩后台了，只是后台不让撩而已。
如何解决这个问题？不允许浏览器请求，只发送真正的请求，我也没解决，如果有已经解决的朋友可以告诉我解决方法
~(￣3￣)~

但是！

我有可以替代的方法
那就是在main.js中，设置axios的默认请求头axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";

可是问题又来了

后台不认这个数据格式啊...

所以在传递的时候必须先把数据转换格式

这时候我们需要用到qs模块
先 npm install qs

在main.js中

引入qs模块

import qs from "qs

然后弄qs原型

Vue.prototype.$qs = qs

这样我们就可以在axios post请求的时候将我们传递的数据转换成后台认识的格式

this.$axios
     .post("http://xxx/", 
        this.$qs.stringify(postData)
      ).then(data => {
        if (data.data.status != 200) {
          //xxx
        } else {
          //xxx
        }
      });

这样就完美解决问题，减少了对服务器的请求，减轻了对服务器的压力，最重要的是可！以！传！

如果有什么疑问欢迎留言，有错误或者有更简单的方法欢迎大力指出

GPU云服务器云服务器发送两次请求 html请求两次 js请求数据遇到的问题吗发送请求

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108267.html

在Vue中如何使用axios请求拦截

摘要：很多初学者就会放弃使用拦截器，毕竟拦截器是可以不使用的，但是使用拦截器，会在页面中减少很多不必要的代码。三不使用请求拦截如果不使用请求拦截，也是可以的，但是会多了非常多的代码，我们以登录页为例。一、前言 axios的基础使用就不过多的讲解啦，如何使用可以看axios文档使用说明·Axios中文说明在这里和大家分享一下axios拦截在实际项目中的使用很多人都看过axios的官方文...

_Dreams 2019-08-23 12:31 评论0 收藏0
axios携带cookie配置（axios+koa）

摘要：通过将属性设置为，可以指定某个请求应该发送凭据。前台跨域请求，由于规范的存在，浏览器会首先发送一次嗅探，同时带上，判断是否有跨域请求权限，服务器响应的值，供浏览器与匹配，如果匹配则正式发送请求。话不多说，一个字，干！前端配置如下： axios.defaults.withCredentials = true; //配置为true axios.post(http:/...

张巨伟 2019-08-23 14:20 评论0 收藏0
【Geek议题】合理的VueSPA架构讨论（上）

摘要：下面也是以模块的模块集为例，可以发现和路由有一些不同就是这里为了防止模块跟全局耦合，运用函数式编程思想类似于依赖注入，将全局的实例作为函数参数传入，再返回出一个包含的对象，这个导出的对象将会被以模块名命名，合并到全局的集中。前言 web前端发展到现代，已经不再是严格意义上的后端MVC的V层，它越来越向类似客户端开发的方向发展，已独立拥有了自己的MVVM设计模型。前后端的分离也使前端人...

worldligang 2019-08-22 15:53 评论0 收藏0
【Geek议题】合理的VueSPA架构讨论（上）

摘要：下面也是以模块的模块集为例，可以发现和路由有一些不同就是这里为了防止模块跟全局耦合，运用函数式编程思想类似于依赖注入，将全局的实例作为函数参数传入，再返回出一个包含的对象，这个导出的对象将会被以模块名命名，合并到全局的集中。前言 web前端发展到现代，已经不再是严格意义上的后端MVC的V层，它越来越向类似客户端开发的方向发展，已独立拥有了自己的MVVM设计模型。前后端的分离也使前端人...

pepperwang 2019-08-02 10:03 评论0 收藏0
使用vue2+Axios遇到的一些坑

摘要：结果是发送原有的请求后台说不阔以。结果是报错解决方法设置的默认请求头使用模块可以不设置，模块会自己设置。设置之后，后台不认这个数据格式，所以在传递的时候必须先把数据转换格式在中，引入模块需要时调用方法 1. 向服务器请求两次的情况（1）axios的默认请求头是Content-Type: application/json，使用这个请求头会出现向服务器请求两次的情况；（2）浏览器会首...

lykops 2019-08-23 14:35 评论0 收藏0