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

vue中使用axios请求接口，请求会发送两次的问题

浏览器分为简单请求以及非简单请求：

解决方案：

跨域请求需要先发一次Option预请求，OPTIONS是检验是否允许跨域的，如果不希望OPTIONS请求，直接让后端遇到option直接返回就可以了，前端可不做处理。

具体情况如下：

写这篇文章时，我们碰到的一个场景是：要给R系统做一个扩展小应用，前端的html、js放在R系统里，后端需要做一个单独的站点N.B.com。这就导致了跨域问题，而且要命的是，后端同学没有权限向招聘的系统里加接口做后端跨域，因此只能做个接口允许前端跨域访问。

有两种方案：1. 使用ajax直接跨域访问，2.使用JsonP。实际使用时，由于JsonP向Server提交URL的长度限制在8000字符，超过了则被浏览器拒绝，因此不采用。

对于第一种方案，后端需要做的工作是：

接口允许允许跨域请求：

header('Access-Control-Allow-Origin:*'); //支持全域名访问，不安全，部署后需要限制为R.com

header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE'); //支持的http动作

header('Access-Control-Allow-Headers:x-requested-with,content-type'); //响应头请按照自己需求添加。

前端发起跨域请求：

就是正常的$.ajax请求即可。

参考：http://www.cnblogs.com/cdemo/p/5158663.html讲的挺详细。

但是，碰到个问题，国内网站基本没有讲，就是option请求问题。。

解决方案见：https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

简要翻译内容如下：

在正式跨域的请求前，浏览器会根据需要，发起一个“PreFlight”（也就是Option请求），用来让服务端返回允许的方法（如get、post），被跨域访问的Origin（来源，或者域），还有是否需要Credentials(认证信息）

三种场景：

1. 如果跨域的请求是Simple Request（简单请求），则不会触发“PreFlight”。Mozilla对于简单请求的要求是：

以下三项必须都成立：

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

2. 其他会导致“PreFlight”的请求。条件基本上是简单请求的补集。。比如我们的这个请求：

3. 如果是PreFlight request 并且是Redirect的：

浏览器直接给拒了 _(:з」∠)_ 。没太弄明白场景。。如果真想跨域跳转，发一个Simple Request就OK。。

解决方法：

目前的项目中，不需要考虑的太复杂，简单处理就是放行OPTIONS请求。
在普通Filter中先通过request获取到method，然后判断OPTIONS后放行；
在ZuulFilter的shouldFilter中，判断OPTIONS直接返回false即可。

会者不难，难者不会！！

vue中使用axios请求接口，请求会发送两次相关推荐

vue中使用axios跨域请求
vue中使用axios请求API或其他域名地址时,会产生跨域请求问题,应该如何解决呢?(本文以请求API为例) 解决方法: 1.为axios设置请求头.拦截器等,这里直接对axios进行封装,将其封装 ...
axios取消接口请求
自己碰到的问题,扒了很多文档才理清楚,当做是笔记记下来说到取消接口请求,可能没碰到这样的坑冷不丁还有点懵,为什么会有取消请求这回事,既然决定要请求这个接口了又要取消它,岂不是有点画蛇添足的操作? 1 ...
Vue-cli3.x中使用Axios发送跨域请求的配置方法
Vue-cli3.x中使用Axios发送跨域请求的配置方法安装axios npm i axios -s main.js中引入 import axios from 'axios'//将axios挂载在 ...
【跨域问题】Vue简单封装axios—解决post请求后端接收不到参数问题
原因分析: 1. 传参数据没有序列化? 解决办法: [推荐] [推荐阅读] vue+axios+qs序列化 "三步解析"[含demo实例]- 代码篇 2. 服务端接受数据格式参数配 ...
vue 文件转换二进制_在vue中使用axios实现post方式获取二进制流下载文件(实例代码)...
需求点击导出下载表格对应的excel文件在 vue 项目中,使用的 axios ,后台 java 提供的 post 接口 api 实现第一步,在 axios 请求中加入参数,表示接收的数据为二进 ...
解决在Vue中使用axios用form表单出现的问题
vue中使用Axios第三方库,采用形式提交,参数格式为multipart /格式数据 ,请求参数变为对象格式的解决办法.(推荐第二种方法) 提交数据的四种编码方式一,应用/ X WWW的窗体-ur ...
vue中Ajax(axios)及Ajax(vue-resource)的使用方法
目录 Vue.js Ajax(axios) GET 方法请求方法的别名并发请求配置项响应结
vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...
Vue中通过Axios向SpringBoot发送get和post请求
场景前端使用Vue+ElementUI实现页面布局. 跨域请求使用axios. 为了将axios的请求对象封装成公共的.新建request.js import axios from 'axios' ...

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

vue中使用axios请求接口，请求会发送两次相关推荐

最新文章

热门文章