一种请求头引起的跨域问题记录(statusCode = 400/CORS)

问题表象

在这里插入图片描述

问题描述

当我们需要在接口的headers中添加一个自定义的变量的时候,前端的处理是直接在拦截器或者是接口配置的地方直接进行写,比如下面的这段比较基础的写法:

  $http({method: "post",url:constants.backend.SERVER_LOGIN_IP_V2 +constants.backend.REQUEST_METHOD.LOGINMESAG,data: JSON.stringify(obj),dataType: "json",headers: { "Content-Type": "application/json","csdn":"this is test" //  这里是为了演示,写了一个csdn的头信息},})

这个时候我们请求的时候会发现,会报错如上图,具体看这里:

app/#/verification:1 Access to XMLHttpRequest at ‘https://api-dev.ennejb.cn/ziam/v2/a1/loginmessage/login?1715740109633’ from origin ‘http://127.0.0.1:5501’ has been blocked by CORS policy: Request header field csdn is not allowed by Access-Control-Allow-Headers in preflight response.

大概的解释就是 我们请求的时候 ,请求头csdn不在请求回调信息允许的请求头里面,说人话就是请求回调不认识你的请求头,

问题解决

我们需要在Access-Control-Allow-Headers: (一般是ng中配置的) 添加我们需要的请求头信息 配置的信息我们是可以看到的,比如配置结束之后请求的完全体是这样的:(这里没有csdn,我只是使用csdn举个例子)
Access-Control-Allow-Headers:

过程分析(问题解决之后可以不往下看了,如果没有解决,可以继续看)
报错的完整信息(第一种现象,CORS错误)

在这里插入图片描述

问题分析解决

这种问题是因为Access-Control-Allow-Headers 没有配置引起的,前面已经说过了,这里说一下为什么,因为一个正常的请求分为复杂请求和简单请求,简单请求一般是请求体和请求头都属于常规的一些请求,请求头没有自定义的一些字段等,这种请求一般的跨域原因就是ip跨域,这种使用Google 的插件就可以得到处理解决,另一种请求是复杂请求,比如你需要自定义的请求头信息,这个时候请求发送出去之后会先发一个预请求(Option
请求),所谓的预请求就是提前发一个简单的请求过去,将请求头带过去,看一下服务器是不是允许这些请求信息请求服务器,如果不允许的话,具体的请求体和返回的数据信息就不进行传输了,这样可以节省带宽和数据的传输,仔细看可以看到,上面是没有任何返回的,因为真实的请求其实并没有发生,假设没有这个预请求,我们的请求体非常大,返回的数据也是非常大的时候,请求结束,准备返回发现请求是非法的,带宽其实已经浪费了,这就是预请求的意义,这里明白了之后预请求就可以理解了,那么这个过程理解了之后,我们在服务器转发的地方进行拦截将自定义的请求头添加到Access-Control-Allow-Headers就可以了

注意的点
  • ng 配置的时候是区分大小写的,这里不要搞错
  • 不是所有的请求都是ng转发的,不是ng转发的时候,需要服务器自己配置
  • 前端配置请求头的时候不管是配置大小写,在真实请求的时候都会展示大写开头
  • 前端配置的时候如果希望不被改格式,可以使用中划线的方式进行定义
报错的完整信息(第二种现象,400错误)

在这里插入图片描述

问题分析解决

一般我们说500之后是服务器的问题,500之前是客户端的问题,所以一般我们看到400的时候是默认不找服务端的,其实不全是,比如这个400,虽然根本上是客户端的问题,但是这里还是需要和服务端沟通,因为引起这个问题的原因之一是服务端要求我们的传的请求头我们没有给,请求就认为是一个400的错误请求,但是请求并没有明确告诉你我需要的请求头是什么,这个是服务端那边代码控制的(也可能是配置的),我们需要和后端统一请求头,比如他要求请求头里面要有csdn这个字段,我们不给,就会报错400,说人话就是我们少了必要的请求头!

问题结束

以上就是关于跨域和请求头信息不全引起问题的记录

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

selenium发展史

Selenium Core 2004 年,Thoughtworks 的工程师 Jason Huggins 正在负责一个 Web 应用的测试工作,由于这个项目需要频繁回归,这导致他不得不每天做着重复且低效的工作。为了解决这个困境,Jason 开发了一个运行在 JavaScript 沙箱中…

React框架-Next 学习-1

创建一个 Next.js 应用,node版本要高,16.5以上 npm淘宝镜像切为https://registry.npmmirror.com npm config set registry https://registry.npmmirror.com npx create-next-applatest//安装后 使用npm run dev 启动 Next.js 是围绕着 页面(pages&am…

我21岁玩“撸货”,被骗1000多万

最近,撸货业界内发生了一些颇受瞩目的事件。 在郑州,数码档口下面抢手团长跑路失联,涉及金额几百万,在南京,一家知名的电商平台下的收货站点突然失联,涉及金额高达一千多万,令众多交易者震惊不已…

回归预测 | Matlab实现GA-LSSVM遗传算法优化最小二乘支持向量机多输入单输出回归预测

回归预测 | Matlab实现GA-LSSVM遗传算法优化最小二乘支持向量机多输入单输出回归预测 目录 回归预测 | Matlab实现GA-LSSVM遗传算法优化最小二乘支持向量机多输入单输出回归预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 Matlab实现GA-LSSVM遗传算法优化最小…

基于 Spring Boot 博客系统开发(十)

基于 Spring Boot 博客系统开发(十) 本系统是简易的个人博客系统开发,为了更加熟练地掌握 SprIng Boot 框架及相关技术的使用。🌿🌿🌿 基于 Spring Boot 博客系统开发(九)&#x1f…

【考研数学】张宇《1000题》强化阶段正确率多少算合格?

张宇1000题真的很练人心态.... 基础不好,建议别碰1000题 基础好,1000题建议在两个月以内刷完 如果自己本身在基础阶段学的比较水,自己的薄弱点刷了一小部分题没有针对性完全解决,转身去刷1000题就会发现,会的题目刷…

算术平均数

算术平均数(average)是一组数据相加后除以数据的个数而得到的结果,是度量数据水平的常用统计量,在参数估计和假设检验中经常用到。比如:用职工平均工资来衡量职工工资的一般水平,用平均体重来观察某一人群体…

通信指挥类装备(多链路聚合设备)-应急通信指挥解决方案

现场通信指挥系统是一种功能全面的便携式音视频融合指挥通信平台,可实现现场应急救援指挥、多种通信手段融合、现场通信组网等功能,是现场指挥系统的延伸。 多链路聚合设备,是一款通信指挥类装备,具有 4G/5G,专网&…

YOLOv8训练流程-原理解析[目标检测理论篇]

关于YOLOv8的主干网络在YOLOv8网络结构介绍-CSDN博客介绍了,为了更好地学习本章内容,建议先去看预测流程的原理分析YOLOv8原理解析[目标检测理论篇]-CSDN博客,再次把YOLOv8网络结构图放在这里,方便随时查看。 ​ 1.前言 YOLOv8训练…

《ESP8266通信指南》17-结尾篇(完结撒花)

《ESP8266通信指南》16-MQTT收发通信-完整代码-(Lua烧录代码的深度思考与串口拦截)-CSDN博客 《ESP8266通信指南》系列的第十六篇,专注于MQTT收发通信的完整代码以及深度思考与串口拦截。本小节首先列出了往期内容,然后提出了本节…

哈希表的理解和实现

目录 1. 哈希的概念 (是什么) 2. 实现哈希的两种方式 (哈希函数) 2.1. 直接定址法 2.2. 除留余数法 2.2.1. 哈希冲突 3. 补充知识 3.1. 负载因子 3.2. 线性探测和二次探测 4. 闭散列实现哈希表 (开放定址法) 4.1. 开放定址法的实现框架 4.2. Xq::hash_table::insert…

今天遇到一个GPT解决不了的问题

问题描述 你好,postman的一个post请求,编辑器里面放了一个很长的json数据,报Tokenization is skipped for long lines for performance reasons. This can be configured via editor.maxTokenizationLineLength.,但是同样的数据&a…

家用充电桩远程监控安全管理系统解决方案

家用充电桩远程监控安全管理系统解决方案 在当今电动汽车日益普及的背景下,家用充电桩的安全管理成为了广大车主关注的重点问题。为了实现对充电桩的高效、精准、远程监控,一套完善的家用充电桩远程监控安全管理系统解决方案应运而生。本方案旨在通过先…

AI 绘画神器 Fooocus 图生图:图像放大或变化、图像提示、图像重绘或扩充、反推提示词、生成参数提取、所需模型下载

本文收录于《AI绘画从入门到精通》专栏,专栏总目录:点这里,订阅后可阅读专栏内所有文章。 大家好,我是水滴~~ 本文讲述 Fooocus 的图生图功能,主要内容包括:图像放大或变化、图像提示、图像重绘或扩充、反推…

深入理解MySQL三大日志:redo log、binlog、undo log

前言 MySQL是一个功能强大的关系型数据库管理系统,它的高可靠性、高性能和易用性使得它成为众多企业和开发者的首选。在MySQL内部,为了保证数据的完整性、恢复能力和并发性能,设计了一套复杂的日志系统。其中,redo log、bin log和…

Qt+C++串口调试工具

程序示例精选 QtC串口调试工具 如需安装运行环境或远程调试,见文章底部个人QQ名片,由专业技术人员远程协助! 前言 这篇博客针对《QtC串口调试工具》编写代码,代码整洁,规则,易读。 学习与应用推荐首选。 …

Mybatis基础操作-删除

Mybatis基础操作-删除 删除 package com.itheima.mapper;import org.apache.ibatis.annotations.Delete; import org.apache.ibatis.annotations.Mapper;Mapper //在运行时,会自动生成该接口的实现类对象(代理对象),并且将该对象…

Vue3知识总结-4

Vue3知识总结-4 文章目录 Vue3知识总结-4插槽Slots渲染作用域默认内容具名插槽插槽中的数据传递具名插槽传递数据 组件声明周期声明周期示意图 组件生命周期的应用动态组件组件保持存活组件被卸载 异步组件依赖注入 插槽Slots 在某些场景中,可能想要为子组件传递一…

redis中的集群模式

主从复制、主从同步(解决高并发读的问题) 主从同步原理: 1.全量同步 slave(从节点)每次请求数据同步会带两个参数:replid和offset。 replid:第一次请求同步时,replid和master的replid不一样,这…

线性系统(一)

线性系统(一) 1.什么是线性系统2.高斯消元法3.高斯-约旦消元法4.线性方程组解的结构 链接: 线性系统(二) 1.什么是线性系统 线性:未知数只能是一次方项 非线性: 同时,读者也可以通过作图来更直观地感受&…