当后端给我返回了302状态码

news2025/7/17 8:18:23

在这里插入图片描述

本文首发于:https://github.com/bigo-frontend/blog/ 欢迎关注、转载。

前言

前段时间接手了一个项目,在代码中看到了这样的一段代码:

    if (
      isHTML(data) &&
      response.request.responseURL?.indexOf(CAS_PREFIX) > -1
    ) {
      window.location.href = response.request.responseURL;
    }

主要的作用就是当后端响应的内容是html的时候,跳转到登录页面。这种方案让我感觉有点别扭,于是具体了解了这段代码出现的原因。

功能的核心在于用户鉴权,后端设想的方案是:当前端发起接口请求,后端识别到用户未登录的时候,就会给前端响应302的状态码,以为很方面,前端不用处理就直接跳转到了登录页面。

然而,他们不知道的是,前端发起的ajax请求,并不能直接跳转,甚至连302状态码都捕获不到。

常见状态码

HTTP 响应状态代码指示特定 HTTP 请求是否已成功完成。响应分为五类:信息响应(100–199),成功响应(200–299),重定向(300–399),客户端错误(400–499)和服务器错误 (500–599)。

  • 200: 请求成功
  • 301:永久重定向
  • 302:临时重定向
  • 303:硬糖少女
  • 304:内容未改变
  • 4:阿森纳
  • 401:需要验证
  • 403:拒绝访问
  • 404:找不到
  • 500:服务器异常

更多状态码:传送门

我们知道,浏览器对于不同的状态码,会有不同的行为。那当返回302的时候,浏览器会有什么样的反应呢?

浏览器处理302状态码

重定向,顾名思义,就是把请求重新指向了一个新的地址。

当浏览器发起一个请求,服务端返回了302状态码,这时候浏览器会根据响应头中的location字段,重新发起一个请求。当重定向次数过多的时候,浏览器会抛出ERR_TOO_MANY_REDIRECT的异常。

请求分两种情况:

  • 浏览器页面请求:跳转到新的页面。
  • ajax请求:返回最后重定向地址的响应。这种重定向,会有可能出现跨域的问题。

前面提到的,服务端觉得返回302很方便,大概是以为ajax也会跳转到新页面吧。

阻止ajax重定向

使用fetch Api进行请求的时候,可以通过redirect参数配置如何处理重定向。

redirect可选的值有三个:

  • follow:自动重定向
  • error:如果产生重定向将自动终止并且抛出一个错误TypeError: Failed to fetch
  • manual:手动处理重定向

在Chrome中默认使用follow(Chrome 47之前的默认值是manual)。

当我们设置成manual时,如果发生了重定向,会拿到type为opaqueredirect的response:

{
    "body": null,
    "bodyUsed": false,
    "headers": {},
    "ok": false,
    "redirected": false,
    "status": 0,
    "statusText": "",
    "type": "opaqueredirect",
    "url": "https://xxx.com",
}

一般来说,我们是不需要手动处理重定向的,因为你不知道这个重定向是否是就是因为未登录才产生的重定向。

如何处理未登录跳转的问题

当用户未登录时,我们除了302状态码之外,可以选择使用401或403状态码,这样至少前端可以捕获到,并作出跳转的处理。

在项目中,我们和服务端的协议格式基本都是json,响应的内容格式如下:

{
    "code": 0,
    "data": null,
    "msg": "ok"
}

一般来说,服务端都会响应200的http状态码,然后使用body里面的code字段标识业务异常。所以当用户未登录时,响应以下内容,也是不错的选择:

{
    "code": 40401,
    "data": "https://login.xxx.com",
    "msg": "Unauthorized"
}

如果的确要考虑自动跳转的场景,可以在服务端区分一下请求是来源于页面请求还是ajax请求,然后根据不同的请求响应不一样的内容即可。比如以Express为例:

// The user needs to login again
if (req.xhr) {
  res.status(200).json({
    code: 40401,
    data: 'https://login.xxx.com',
    msg: "Unauthorized"
  })
} else {
  res.redirect('https://login.xxx.com')
}

另外,我们还可以利用Accept请求头来区别响应。

Accept 请求头用来告知(服务器)客户端可以处理的内容类型,这种内容类型用MIME类型来表示。借助内容协商机制, 服务器可以从诸多备选项中选择一项进行应用,并使用 Content-Type 应答头通知客户端它的选择。浏览器会基于请求的上下文来为这个请求头设置合适的值,比如获取一个CSS层叠样式表时值与获取图片、视频或脚本文件时的值是不同的。

常见的,直接在浏览器导航栏打开一个地址,Accept的值大概会是Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9;ajax请求,会是:Accept: application/json, text/javascript, */*; q=0.01。其中;q= (q因子权重)的值代表权重。

更多Accept介绍:传送门

后语

最后,点一下题。当后端给你返回了302,在他们看来,应该是这样的:

在这里插入图片描述

然而,在前端看来,却是这样的:

在这里插入图片描述

以上,简单探讨了常见又不常处理的状态码302,如有错漏,欢迎指正!

欢迎大家留言讨论,祝工作顺利、生活愉快!

我是bigo前端,下期见。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405928.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

cesium简介

文章目录1.什么是Cesium?2.Cesium能做什么?3.Cesium的依赖性4.Cesium学习参考Cesium实战系列文章总目录: 传送门1.什么是Cesium? Cesium是AGI公司计算机图形开发小组与2011年研发的三维地球和地图可视化开源JavaScript库&#xf…

【微信小程序 | 实战开发】实现ES6转ES5开关

个人名片: 🐼作者简介:一名大二在校生,喜欢编程🎋 🐻‍❄️个人主页🥇:小新爱学习. 🐼个人WeChat:hmmwx53 🕊️系列专栏:🖼️ 零基础学Java——小白入门必备重识C语言——复习回顾

Java开发框架选型对比:ruoyi与yudao框架

1、基础开发框架 1.1 什么是基础开发框架? 基础框架可以理解为建立一个项目所需的基础框架,这个基础框架为凝聚了之前开发项目的通用、共性的方法、工具、技术等组成的代码包。 现有我们公司有两类基础框架:(1)基于w…

vue2使用element UI中Descriptions组件的遍历问题

需求描述:展示信息时其中部门区域是未知数量的,需要通过遍历进行展示。如下图举例,其中地址和备注是一一对应关系,需遵循该样式。 问题描述:起初我在el-descriptions中直接使用v-for进行遍历地址和备注两个el-descript…

实现异步的8种方式

前言异步执行对于开发者来说并不陌生,在实际的开发过程中,很多场景多会使用到异步,相比同步执行,异步可以大大缩短请求链路耗时时间,比如:「发送短信、邮件、异步更新等」,这些都是典型的可以通…

Switch语句用法及案例

​ 一、Switch语句用法 switch是多分支语句,用于判断一个表达式的值,然后执行相应的语句。(可以实现多选一) switch语句执行思路:利用表达式的值,来判断执行哪个语句。(简单的来说就是利用我们…

Vue 3 安装及环境配置

Vue 3 安装及环境配置1、安装 Node.js2、配置默认安装目录和缓存日志目录3、配置环境变量4、配置淘宝镜像5、安装 vue 和脚手架6、安装vue-cli 3.x7、创建 vue 3 项目8、可能遇到的问题1、安装 Node.js Node.js 官网:https://nodejs.org/en/download 安装成功后在…

Vue项目实战——实现一个任务清单【基于 Vue3.x 全家桶(简易版)】

Vue3.x 项目实战(一) 内容参考链接Vue2.x全家桶Vue2.x 全家桶参考链接Vue2.x项目(一)Vue2.x 实现一个任务清单Vue2.x项目(二)Vue2.x 实现GitHub搜索案例Vue3.x项目(三)Vue3.x 实现一…

Vue项目部署(Nginx)

本文记录如何将做好的Vue项目部署到服务器上,需要准备: linux系统的服务器或者虚拟机Vue项目打包Nginx服务器的配置和部署1、linux系统准备 本次使用云主机作为部署主机。 2、Vue项目打包 切换到项目所在目录,使用 npm run build 命令完成项目…

深度学习——VGG16模型详解

1、网络结构 VGG16模型很好的适用于分类和定位任务,其名称来自牛津大学几何组(Visual Geometry Group)的缩写。 根据卷积核的大小核卷积层数,VGG共有6种配置,分别为A、A-LRN、B、C、D、E,其中D和E两种是最…

yolov5源码解析(9)--输出

本文章基于yolov5-6.2版本。主要讲解的是yolov5是怎么在最终的特征图上得出物体边框、置信度、物体分类的。 一。总体框架 首先贴出总体框架,直接就拿官方文档的图了,本文就是接着右侧的那三层输出开始讨论。 Backbone: New CSP-Darknet53Neck: SPPF, …

JavaWeb酒店管理系统

酒店管理系统 一、项目介绍 1、项目用到的技术栈 开发工具:idea语言:java、js、htmlajax数据库:MySQL服务器:Tomcat框架:mybatis、jQuery 2、项目实现功能 管理员和用户登录和退出功能以及用户注册功能&#xf…

【第二趴】uni-app开发工具(手把手带你安装HBuilderX、搭建第一个多端项目初体验)

文章目录写在前面HBuilderXHBuilderX 优势HBuilderX 安装uni-app 初体验写在最后写在前面 聚沙成塔——每天进步一点点,大家好我是几何心凉,不难发现越来越多的前端招聘JD中都加入了uni-app 这一项,它也已经成为前端开发者不可或缺的一项技能…

Eolink 治愈了后端开发者的痛

一、前后端的爱恨情仇 最近公司的一个前端同事和一个后端同事吵了一架,事情大概是这样的。后端说要联调接口,前端说你的数据尽量按我的要求来,后端不干,说你这个没用。前端就讲道理呀,传统的前后端分离返回的格式要尽…

【node进阶】深入浅出websocket即时通讯(二)-实现简易的群聊私聊

✅ 作者简介:一名普通本科大三的学生,致力于提高前端开发能力 ✨ 个人主页:前端小白在前进的主页 🔥 系列专栏 : node.js学习专栏 ⭐️ 个人社区 : 个人交流社区 🍀 学习格言: ☀️ 打不倒你的会使你更强&a…

保姆级教程:Ant Design Vue中 a-table 嵌套子表格

前端为Ant Design Vue 版本为1.6.2,使用的是vue2 Ant Design Vue中 a-table 嵌套子表格,说的可能稍微墨迹了点,不过重点内容都说的比较详细,利于新人理解,高手可以自取完整代码 内容概述:完成样式及完整代…

在收到消息后秒级使网站变灰,不改代码不上线,如何实现?

注意:文本不是讲如何将网站置灰的那个技术点,那个技术点之前汶川地震的时候说过。 本文不讲如何实现技术,而是讲如何在第一时间知道消息后,更快速的实现这个置灰需求的上线。 实现需求不是乐趣,指挥别人去实现需求才…

[Vue warn]: Error in render: “TypeError: Cannot read properties of undefined(reading“category1Name“

明明页面正常显示,但是控制台却一直报 如下 错误 [Vue warn]:渲染错误:"TypeError:无法读取未定义的属性(读取category1Name)" 中发现的 Detail 的 vuex 仓库 import { reqDetail } from "/api" export default{actions:{async getDetail({co…

【前端修炼场】 — 这些标签你学会了么?快速拿下 “hr”

此文为【前端修炼场】第四篇&#xff0c;上一篇文章链接&#xff1a;上一篇 文章目录前言一、 常用标识符1.1 特殊标识符1.1.1 "<" 和 ">"&#xff08;<&#xff1b;&#xff09;1.1.2 空格&#xff08;&emsp&#xff1b;&#xff09;1.1.3 商…

uniapp微信小程序无法使用本地静态资源图片,背景图在真机不显示方法

前言 首先要说明&#xff0c;使用HBuilder或者vs Code工具开发的时候&#xff0c;在微信开发者工具调试的时候&#xff0c;我们使用本地图片是OK的&#xff0c;但是一旦放到真机上调试的时候&#xff0c;图片就显示不出来。 先看uniapp官网对背景图片的说明 错误用法 <tem…