vue跨域拦截浏览器options预检

最新推荐文章于 2024-04-01 08:44:24 发布
VIP文章 最新推荐文章于 2024-04-01 08:44:24 发布
阅读量6.4k 收藏 4
点赞数
文章标签： 拦截OPTIONS VUE 跨域
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34295211/article/details/91351702
版权

       当你跨域访问接口的时候，会发现你的接口请求了两次，然后仔细对比一下会发现请求类型并不一致，一个是OPTIONS，另一个是你的POST请求。事情是这样发生的，当浏览器发现你准备跨域进行非简单请求的时候（有关简单请求说明请移步https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests），他会自发的发出一个OPTIONS请求进行预检查，用来判断这个接口后台是否允许访问，如果行，那就会把你真正的请求发出去，如果不行，那就到此为止了。

 

    如下图所示，这个时候你的跨域非简单请求已经触发了浏览器的OPTIONS预检查，这个时候我们还是有方法去拦截OPTIONS的。（为了减少请求的次数我们需要拦截OPTIONS预检）

     第一种方法就是在npm上下载一个qs模块&#x

最低0.47元/天 解锁文章
「已注销」
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web端vue项目跨域避免options请求
weixin_30925411的博客
03-22 3714
vue项目前端配置： Axios.defaults.timeout = 10000 Axios.defaults.baseURL = ApiUrl.baseURL Axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; Axios.defaults.withCredentials = true /...
ajax请求接口跨域问题解决方案(控制器加header头)
tjg888888的博客
03-15 3141
 response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));        response.setHeader("Access-Control-Allow-Credentials", "true");        response.setHeader("P3P", "CP=CAO PSA OUR.
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
01-19
我们在vue开发中用axios进行跨域请求时有时会遇到，同一个接口请求了两次，并且第一次都是options请求，然后才是post/get请求 如下图 options请求 get请求 为什么会出现这种原因呢？ 这是因为CORS跨域分为 简单跨域请求和复杂跨域请求； 简单跨域不会发送options请求，复杂跨域会发送一个预检请求options。 1.简单跨域满足的条件 1.请求方式是以下三种之一： HEAD GET POST 2.HTTP的头信息不超出以下几种字段 Accept Accept-Language Content-Language Last-Event-ID Content-
Vue中如何处理跨域请求？请描述Vue的跨域解决方案
最新发布
有我更精彩的博客
04-01 471
在前端开发中，经常会遇到处理跨域请求的情况，特别是在使用Vue框架开发项目时。跨域请求是指浏览器的同源策略限制，只允许相同源的接口进行通信，当我们在Vue项目中需要请求不同域的数据时就会出现跨域请求的问题
vue 解决axios会发送options请求
qq_38253703的博客
04-17 4548
问题描述： Vue的开发者都知道axios，很多都用axios来进行数据交互，axios的默认请求头是Content-Type: application/json 使用这个请求头会出现向服务器请求两次的情况 为什么呢？ 原因是：浏览器会首先使用 OPTIONS 方法发起一个预请求，判断接口是否能够正常通讯，如果不能就不会发送真正的请求过来，如果测试通讯正常，则开始真正的请求。 这样每个请求都会发送...
为什么会有options预检请求？能否移除？
weixin_44421461的博客
02-01 1558
点击上方“Java基基”，选择“设为星标”做积极的人，而不是积极废人！每天14:00更新文章，每天掉亿点点头发...源码精品专栏原创 | Java 2021超神之路，很肝~中文详细注释的开源项目RPC 框架 Dubbo 源码解析网络应用框架 Netty 源码解析消息中间件 RocketMQ 源码解析数据库中间件 Sharding-JDBC 和 MyCAT 源码解析作业调度中间件 Elast...
节流Axios_解决vue axios跨域 Request Method： OPTIONS问题(预检请求)
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
08-16 454
　　我们在vue开发中用axios进行跨域请求时有时会遇到，同一个接口请求了两次，并且第一次都是options请求，然后才是post/get请求 　　如下图 　　 　　options请求 　　 　　get请求 　　为什么会出现这种原因呢？ 　　这是因为CORS跨域分为 简单跨域请求...
vue-cli3 axios去除预检请求OPTIONS 做请求代理
Huang_wf
06-02 9663
本地开发 在 vue.config.js 配置代理 proxy: { '/api': { target: 'https://easy-mock.com/mock/5cce946a3d417120b6186d75/data_demo', // 接口地址 secure: false, //https请求需要这个参数 changeOrigin: true, //是否...
Vue常用指令//取消请求
qq_20623665的博客
12-07 1530
el 挂载点data vue里的的数据methods 方法computed 计算属性props 用于接收来自父组件的数据watch 侦听器tempplate 一个字符串模板作为 Vue 实例的标识使用 内容可以作为插槽v-htmlv-modelv-show根据表达式之真假值，切换元素的 CSS property。当条件变化时该指令触发过渡效果。v-onv-bind条件判断v-ifv-elsev-else-ifv-for key
vue：cancelToken 取消请求 方法记录
weixin_56181499的博客
05-17 596
写项目时，由于服务器或数据量或sql性能问题，请求功能缓慢，百度了CSDN的，整合了一下在写的项目功能，记录一下。cancelToken 也可以用于优化性能，防止重复请求，后续用到 再 '百' 再整合。：'百' '拷' 'C'
Vue接口请求取消（AbortController 和 CancelToken）
zluz_的博客
01-17 3018
Vue接口请求取消
在vue中阻止浏览器后退的实例
10-16
今天小编就为大家分享一篇在vue中阻止浏览器后退的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue使用axios出现options请求方法
10-16
主要介绍了Vue使用axios出现options请求，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
springboot vue 跨域问题的解决
08-26
主要介绍了springboot vue 跨域问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
关于vue 项目中浏览器跨域的配置问题
01-18
1、什么是跨域 当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。 2、同源策略 同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，...
【Token】使用HandlerInterceptor拦截器解决Vue项目中跨域时预请求问题
qq_61903414的博客
06-05 897
在项目中使用token取代session实现登录鉴权时，Vue中每次请求都会带有携带token的请求头，此时前端会发送两次请求，在跨域请求中，浏览器会首先发送一个预检请求（Preflight Request）来检查服务器是否允许跨域请求。预检请求是一个 OPTIONS 请求，其中包含一个头部信息，用于列出实际请求中会包含的请求头。服务器需要正确响应预检请求，并在响应中包含头部信息，以允许实际请求中包含列出的请求头。
vue-axios整合使用 取消options请求
weixin_30377461的博客
07-17 4572
https://blog.csdn.net/hant1991/article/details/74931158 结合qs ， 默认请求就是application/json, 所以不需要自己加上头部headers : { 'Content-Type':'application/json;charset=UTF-8' }, 转载于:https://www.c...
OPTIONS预检请求如何解决—CORS与PreFlight（Response to preflight request doesn‘t pass access control check: It ）
BLWY_1124的博客
08-09 2045
Access to XMLHttpRequest at 'http://localhost:9081/admins/add-new' from origin 'http://localhost:8888' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
Vue笔记：options预检请求
qq_43485284的博客
09-22 2016
第一次遇到options请求，看了一些资料和别人的博客才有所了解 第一步，先了解了几个概念： CORS：（Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。（参考MDN术语表） 同源安全策略 默认阻止“跨域”获取资源。但是 CORS 给了web服务...
vue 取消options 预检请求
05-01
Vue中取消options预检请求的方法非常简单，只需要在发送请求时设置headers中的Content-Type为application/x-www-form-urlencoded即可。 当Vue发送跨域请求时，浏览器会首先发送一个options预检请求来确认是否有权限访问目标服务器。如果服务器允许跨域访问，则浏览器会发送实际的请求。但是，在一些特殊情况下，例如请求头中包含Authorization信息时，服务器会拒绝options请求，导致请求失败。 为了解决这个问题，我们可以在发送请求时设置headers中的Content-Type为application/x-www-form-urlencoded。这样浏览器就不会发送options请求，而是直接发送实际的请求，服务器也会正确响应。 具体的代码实现如下： ``` import axios from 'axios'; // 设置Content-Type为application/x-www-form-urlencoded axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; axios.post('/api/user/login', { username: 'admin', password: '123456' }).then(response => { console.log(response); }); ``` 通过这种方式来取消options预检请求，可以更好地解决跨域访问问题，提高应用的性能和稳定性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值