axios 处理 302 状态码的解决方法

比如说浏览器打开了一个单页面（SPA）应用，过了一段时间token（或者session）过期了，这个时候页面上发起 Ajax请求之后，后端返回302状态码跳转到login页面。 我这是使用的是 Vue + axios ，发现 axios 无法拦截到 302请求，下面是处理的过程。

思考

google axios 302 handle 看到 axios github 上的两个讨论

•  https://github.com/axios/axios/issues/932

•  https://github.com/axios/axios/issues/980

得到的结论就是：浏览器发送的ajax请求，服务端返回了302状态码，浏览器会自行跳转，我们无法通过 js 库（jquery, axios) 直接得到并自定义处理流程，只能等到浏览器重定向之后的url获取相应信息。

axios 发送ajax -->
server 返回302和location -->
浏览器请求新的url -->
服务端返回200 -->

axios 获取结果

那么怎么解决呢？需要服务端配合解决

Brower (ajax and not auth) -->
server判断是ajax请求，未登陆，返回 401状态码 -->
浏览器 axios 拦截401，并且通过js 跳转到 /login

解决

浏览器端, axios 增加拦截器

axios.interceptors.response.use((response) => {
  return response;
}, function (error) {
  if (401 === error.response.status) {
    window.location = '/login';
  } else {
    return Promise.reject(error);
  }
});
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

后端代码，使用flask框架，看个流程就行，验证请求是否是 ajax 和 未登陆，然后返回401状态码

from flask import Blueprint, request, jsonify, make_response, abort
from flask_login.utils import current_user, current_app
apibp = Blueprint('api', 'api_bp')
# 主要逻辑
def bp_login_required():
  if not current_user.is_authenticated:
    if request.is_xhr:
      abort(401)
    else:
      return current_app.login_manager.unauthorized()
apibp.before_request(bp_login_required)
@apibp.route("/report/domains/<month>/", methods=["GET"])
def monthly_domains(month):
  return jsonify({})
ref

•   https://github.com/axios/axios/issues/690

总结

以上所述是小编给大家介绍axios 处理 302 状态码的解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 关于axios如何全局注册浅析

    前言 最近用 Vue 写项目的时候,用到 axios ,因为 axios 不能用 Vue.use() (详细介绍可以参考这篇文章),所以在每个 .vue 文件中使用 axios 时就需要 import , .vue 文件少的话还好说,多的话未免有点麻烦. 后来想了想,能不能直接把 axios 加到 Vue 的原型中,这样就达到了全局注册了.下面话不多说了,来一看看详细的介绍吧. 方法如下: 1. 首先在 main.js 中引入 axios import Vue from 'vue' import

  • 在vue中通过axios异步使用echarts的方法

    在vue中通过axios异步使用echarts的方法

    现实的工作中, 数据不可能是像之前的demo演示的那样把数据写死的. 所有的数据都应该通过发送请求进行获取, 所以, 这篇文章, 我将在Vue项目中使用Echarts: 在Vue中引入Echarts中的数据提取出来, 放入到static/data.json文件中,请求该文件获取数据. 一. 实现异步加载数据 (一)引入vue-resource 通过npm下载axios //命令行中输入 npm install axios --save 在main.js中引入axios并注册 // main.js

  • vue中axios解决跨域问题和拦截器的使用方法

    vue中axios不支持vue.use()方式声明使用. 所以有两种方法可以解决这点: 第一种: 在main.js中引入axios,然后将其设置为vue原型链上的属性,这样在组件中就可以直接 this.axios使用了 import axios from 'axios'; Vue.prototype.axios=axios; components: this.axios({ url:"a.xxx", method:'post', data:{ id:3, name:'jack' } }

  • 解决vue2中使用axios http请求出现的问题

    使用axios处理post请求时,出现的问题解决 默认情况下: axios.post(url, params).then(res => res.data); 当url是远程接口链接时,会报404的错误: Uncaught (in promise) Error: Request failed with status code 404 我们需要实例化一个新的axios,并且设置他的消息头为'content-type': 'application/x-www-form-urlencoded' 于是得出

  • 完美解决axios跨域请求出错的问题

    完美解决axios跨域请求出错的问题

    错误信息: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. The response had HTTP status code 403

  • vue+vuex+axios实现登录、注册页权限拦截

    在GitHub上有很多写好的模板,这个项目也是基于模板做的. 现在记录一下我做的过程 1.修改config文件夹里的dev.env.js里的BASE_API,把地址改成请求后端的公共部分 BASE_API: '"http://192.168.xx.xx"', 2.接下来就是操作src文件,先在 views里写好vew组件(login.vue,regist.vue),写好到router里的index.js里配置好路径 login.vue <template> <div

  • 关于axios不能使用Vue.use()浅析

    关于axios不能使用Vue.use()浅析

    前言 最近在学习axios,在使用过程遇到了一些问题,觉着有必要给大家分享下,关于axios的基本知识大家可以参考这篇文章:axios基本入门用法教程 ,下面话不多说了,来一起看看详细的介绍吧. 问题 相信很多人在用Vue使用别人的组件时,会用到 Vue.use() .例如:Vue.use(VueRouter) . Vue.use(MintUI) .但是用 axios时,就不需要用 Vue.use(axios) ,就能直接使用.那这是为什么呐? 答案 因为 axios 没有 install. 什

  • axios 处理 302 状态码的解决方法

    比如说浏览器打开了一个单页面(SPA)应用,过了一段时间token(或者session)过期了,这个时候页面上发起 Ajax请求之后,后端返回302状态码跳转到login页面. 我这是使用的是 Vue + axios ,发现 axios 无法拦截到 302请求,下面是处理的过程. 思考 google axios 302 handle 看到 axios github 上的两个讨论 •  https://github.com/axios/axios/issues/932 •  https://git

  • ASP.NET设置404页面返回302HTTP状态码的解决方法

    在配置文件中配置404页面如下: 复制代码 代码如下: <customErrors mode="On" defaultRedirect="404.aspx"> <error statusCode="403" redirect="404.aspx" /> <error statusCode="404" redirect="404.aspx" /> <

  • jQuery 更改checkbox的状态,无效的解决方法

    今天写页面遇到复选框动态全选或全不选问题,正常写法如下: $("#tb").find("input[type='checkbox']").attr("checked","checked"); but!第一次点击全选按钮input显示对勾,第二次就不行了,查了下有建议用prop的,亲测有效.那两者有啥区别呢? jQuery函数attr()和prop()的区别: 1.操作对象不同 "attr"和"pr

  • Vue 2.5.2下axios + express 本地请求404的解决方法

    最近在学习Vue,今天尝试了使用axios模拟本地网络请求.使用的过程中发现接口请求一直404,后来发现在当期的Vue-cli构建的最新的项目中,接口请求应该这样写. 1.引入相关依赖 var axios = require('axios') const express = require('express'); var app = express(); var apiRoutes = express.Router(); app.use('/api', apiRoutes); 2.处理网络请求

  • layui表格 返回的数据状态异常的解决方法

    最近用到了layui表格组件,结果发现数据返回状态异常 在网上查询了下是因为需要转成固定个格式 然而layui的table默认返回的数据格式为: response: { //定义后端 json 格式,详细参见官方文档 code: 0, msg: "", count: 1000, data: [] } 网上看了有些方法是转成json数据 JSONObject obj=new JSONObject(); //前台通过key值获得对应的value值 obj.put("code&qu

  • Nginx中定义404页面并且返回404状态码的正确方法

    Nginx中定义404页面并且返回404状态码的正确方法

    前几天,一朋友出程序出问题却怎么查都没看出问题,于是让我帮它看看.其实它是ajax请求了很多个模板,然后把模板写到页面中.关键是所有请求的页面都是200正常状态码返回,表面上看没什么问题,实际上有些请求虽然返回200状态码,但给回的状态码是200.WebServer是nginx,直接告诉我应该他们配置了nginx的404错误页面,虽然请求不存在的资源可以成功返回404页面,但返回状态码确是200. 404.html 复制代码 代码如下: This is 404 page. 请求一个不存在的页面:

  • Python无法用requests获取网页源码的解决方法

    最近在抓取http://skell.sketchengine.eu网页时,发现用requests无法获得网页的全部内容,所以我就用selenium先模拟浏览器打开网页,再获取网页的源代码,通过BeautifulSoup解析后拿到网页中的例句,为了能让循环持续进行,我们在循环体中加了refresh(),这样当浏览器得到新网址时通过刷新再更新网页内容,注意为了更好地获取网页内容,设定刷新后停留2秒,这样可以降低抓不到网页内容的机率.为了减少被封的可能,我们还加入了Chrome,请看以下代码: fro

  • http200、301、304等状态码详解

    当浏览者访问一个网页时,浏览者的浏览器会向网页所在服务器发出请求.当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含HTTP状态码的信息头(server header)用以响应浏览器的请求 HTTP状态码的英文为HTTP Status Code. 下面是常见的HTTP状态码: •200 - 请求成功 •301 - 资源(网页等)被永久转移到其它URL •404 - 请求的资源(网页等)不存在 •500 - 内部服务器错误 200表示正常0k,这个是地球人都知道的了. 301 Moved

  • IOS HTTP请求的常见状态码总结

    IOS HTTP请求的常见状态码总结 1xx消息 这一类型的状态码,代表请求已被接受,需要继续处理.这类响应是临时响应,只包含状态行和某些可选的响应头信息,并以空行结束.由于HTTP/1.0协议中没有定义任何1xx状态码,所以除非在某些试验条件下,服务器禁止向此类客户端发送1xx响应. 这些状态码代表的响应都是信息性的,标示客户应该采取的其他行动. 100 Continue 客户端应当继续发送请求.这个临时响应是用来通知客户端它的部分请求已经被服务器接收,且仍未被拒绝.客户端应当继续发送请求的剩

  • http 200、301、304等状态码详解

    当浏览者访问一个网页时,浏览者的浏览器会向网页所在服务器发出请求.当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含HTTP状态码的信息头(server header)用以响应浏览器的请求 HTTP状态码的英文为HTTP Status Code. 下面是常见的HTTP状态码: •200 - 请求成功 •301 - 资源(网页等)被永久转移到其它URL •404 - 请求的资源(网页等)不存在 •500 - 内部服务器错误 200表示正常0k,这个是地球人都知道的了. 301 Moved

随机推荐