vue-resource2.0已经不再更新,所以vue2.0官方推荐使用axios来代替。
实际项目也是应用上了vue+axios,然后就有了这么一段填坑的经历。

问题:axios使用post请求时,发送了两次,而get则正常。
第一次请求不是正确的post请求,第二次才是正确的

调出谷歌开发者工具

image.png

“Request Method: OPTIONS”
什么鬼,post请求时,这里的“Request Method”居然不是post,而是这个OPTIONS。注意:它还是额外发送的。

项目中采用前后端分离的开发方式,前端通过调用后端API实现数据传输。
后端同学则通过反向代理解决了前端跨域的问题。(前端调接口跟在同域下使用时一样,该怎么用怎么用)

找到原因:其实这个情况并非bug,而是当项目中有用到跨域请求时,除了get方式的http请求,都会发送一个预检请求。

跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些源站有权限访问哪些资源。另外,规范要求,对那些可能对服务器数据产生副作用的 HTTP 请求方法(特别是 GET 以外的 HTTP 请求,或者搭配某些 MIME 类型的 POST 请求),浏览器必须首先使用 OPTIONS 方法发起一个预检请求(preflight request),从而获知服务端是否允许该跨域请求。服务器确认允许之后,才发起实际的 HTTP 请求。在预检请求的返回中,服务器端也可以通知客户端,是否需要携带身份凭证(包括 Cookies 和 HTTP 认证相关数据)。
相关资料https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_C

解决方案:只能麻烦后端同学帮忙处理下

header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Headers:content-type");
header("Access-Control-Request-Method:GET,POST");
if(strtoupper($_SERVER['REQUEST_METHOD'])== 'OPTIONS'){
exit;
}

后端遇到请求方式是“Request Method: OPTIONS” 时,直接返回或退出即可,不再往下执行程序。
上述header的设置用的是PHP的设置方法,在Web服务器端,如nginx, apache也可以对header进行设定。

Axios 执行post发送两次请求的小坑的更多相关文章

  1. axios发送两次请求原因及解决方法

    axios发送两次请求原因及解决方法 最近Vue项目中使用axios组件,在页面交互中发现axios会发送两次请求,一种请求方式为OPTIONS,另外一种为自己设置的. 如图: 什么是CORS通信? ...

  2. axios发送两次请求问题解决

    在使用axios的过程中,会发送两次请求. 看了下是因为有一个请求是OPTIONS来判断跨域的时候让不让发送请求的. 这个不算是一个bug,但是发送两个请求着实让人看着不舒服.于是修改了下,原来的请求 ...

  3. vue使用axios发送请求,都会发送两次请求

    vue 使用axios,每次的请求都会发送两次,第一次的请求头为options CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sha ...

  4. 【跨域】SpringBoot跨域,拦截器中,第一次获取的请求头为NULL,发送两次请求的处理方式

    背景: 在做前后端分离时,牵扯到跨域,但是已经设置了跨域 前端设置了允许携带Cookie axios.defaults.withCredentials = true; 后端也配置了跨域 浏览器端查看发 ...

  5. nuxt或者vue,axios中如何发送多个请求

    在使用vue或者nuxt中,我们需要使用axios去发送多个http请求,参考了axios的官方说明你也许会想到使用axios.all发送请求,但是这样可能会出现一些异常错误: (node:9360) ...

  6. nginx配置跨域之后每次访问会发送两次请求

    公司项目从前后端不分离转到前后端分离 首先遇到的问题就是前后端分离的时候跨域的问题 但是当跨域成功配置并且能访问成功的时候发现 每次客户端的请求都会发送两次 第一次是OPTIONS的请求,然后才是正常 ...

  7. jquery table 发送两次请求 解惑

    版本1.10 以下链接为一个较低版本解决方案: http://blog.csdn.net/anmo/article/details/17083125 而我的情况有点作, 情况描述: 1,一个页面两个t ...

  8. JavaScript中一个方法同时发送两个ajax请求问题

    今天在做项目中遇到一个问题,大概是在一个jsp页面同时有一个select下拉搜索条件框和一个Bootstrap表格展示列表.这两个都要通过ajax向后台拿数据,而且要在页面加载时完成.当时的做法是: ...

  9. JS发送跨域Post请求出现两次请求的解决办法

    原文地址: http://www.cnblogs.com/JimmyBright/p/7681097.html 所有跨域的js在提交post请求的时候,如果服务端设置了可跨域访问 public sta ...

随机推荐

  1. ssm框架的整合

    首先创建一个web工程,我这里使用的IDE为eclipse. 结果目录如下: 添加相关的jar包: 接下来是完成配置文件 首先我们先配置web.xml: <?xml version=" ...

  2. ASP.NET Core 认证与授权[4]:JwtBearer认证

    在现代Web应用程序中,通常会使用Web, WebApp, NativeApp等多种呈现方式,而后端也由以前的Razor渲染HTML,转变为Stateless的RESTFulAPI,因此,我们需要一种 ...

  3. 1041: [HAOI2008]圆上的整点

    1041: [HAOI2008]圆上的整点 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 4298  Solved: 1944[Submit][Sta ...

  4. Python-week2,第二周(基于Python3.0以上)

    1,列表 存储数据我们可以使用变量,但是当有很多个数据的时候用变量就会出现很多的局限性,所以这时候就用到了列表.列表就是中括号里每个元素使用逗号隔开.列如     [1,2,3]     这就是一个列 ...

  5. java中的缓冲流BufferedWriter和BufferedReader

    java中的缓冲流有BufferedWriter和BufferedReader 在java api 手册中这样说缓冲流: 从字符输入流中读取文本,缓冲各个字符,从而实现字符.数组和行的高效读取.可以指 ...

  6. Azkaban 2.5.0 搭建和一些小问题

    安装环境: 系统环境: ubuntu-12.04.2-server-amd64 安装目录: /usr/local/ae/ankaban JDK 安装目录: export JAVA_HOME=/usr/ ...

  7. CUDA C Best Practices Guide 在线教程学习笔记 Part 1

    0. APOD过程 ● 评估.分析代码运行时间的组成,对瓶颈进行并行化设计.了解需求和约束条件,确定应用程序的加速性能改善的上限. ● 并行化.根据原来的代码,采用一些手段进行并行化,例如使用现有库, ...

  8. HTML5新特性之WebRTC[转]

    原文:http://www.cnblogs.com/jscode/p/3601648.html?comefrom=http://blogread.cn/news/ 1.概述 WebRTC是“网络实时通 ...

  9. Clipboard 剪辑板

    ie是最早支持剪辑板相关事件(并且允许javascript接入)的浏览器(鼠标右键复制)   相关事件: beforecopy— Fires just before the copy operatio ...

  10. HTML DOM应用案例2

    <html> <head> <title>day03</title> <script type="text/javascript&quo ...