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

2024-05-16 01:52

本文主要是介绍一种请求头引起的跨域问题记录(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,说人话就是我们少了必要的请求头!

问题结束

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

这篇关于一种请求头引起的跨域问题记录(statusCode = 400/CORS)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/993540

相关文章

好题——hdu2522(小数问题:求1/n的第一个循环节)

好喜欢这题,第一次做小数问题,一开始真心没思路,然后参考了网上的一些资料。 知识点***********************************无限不循环小数即无理数,不能写作两整数之比*****************************(一开始没想到,小学没学好) 此题1/n肯定是一个有限循环小数,了解这些后就能做此题了。 按照除法的机制,用一个函数表示出来就可以了,代码如下

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

购买磨轮平衡机时应该注意什么问题和技巧

在购买磨轮平衡机时,您应该注意以下几个关键点: 平衡精度 平衡精度是衡量平衡机性能的核心指标,直接影响到不平衡量的检测与校准的准确性,从而决定磨轮的振动和噪声水平。高精度的平衡机能显著减少振动和噪声,提高磨削加工的精度。 转速范围 宽广的转速范围意味着平衡机能够处理更多种类的磨轮,适应不同的工作条件和规格要求。 振动监测能力 振动监测能力是评估平衡机性能的重要因素。通过传感器实时监

缓存雪崩问题

缓存雪崩是缓存中大量key失效后当高并发到来时导致大量请求到数据库,瞬间耗尽数据库资源,导致数据库无法使用。 解决方案: 1、使用锁进行控制 2、对同一类型信息的key设置不同的过期时间 3、缓存预热 1. 什么是缓存雪崩 缓存雪崩是指在短时间内,大量缓存数据同时失效,导致所有请求直接涌向数据库,瞬间增加数据库的负载压力,可能导致数据库性能下降甚至崩溃。这种情况往往发生在缓存中大量 k

6.1.数据结构-c/c++堆详解下篇(堆排序,TopK问题)

上篇:6.1.数据结构-c/c++模拟实现堆上篇(向下,上调整算法,建堆,增删数据)-CSDN博客 本章重点 1.使用堆来完成堆排序 2.使用堆解决TopK问题 目录 一.堆排序 1.1 思路 1.2 代码 1.3 简单测试 二.TopK问题 2.1 思路(求最小): 2.2 C语言代码(手写堆) 2.3 C++代码(使用优先级队列 priority_queue)

Node.js学习记录(二)

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo

题目1254:N皇后问题

题目1254:N皇后问题 时间限制:1 秒 内存限制:128 兆 特殊判题:否 题目描述: N皇后问题,即在N*N的方格棋盘内放置了N个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在同一斜线上。因为皇后可以直走,横走和斜走如下图)。 你的任务是,对于给定的N,求出有多少种合法的放置方法。输出N皇后问题所有不同的摆放情况个数。 输入

vscode中文乱码问题,注释,终端,调试乱码一劳永逸版

忘记咋回事突然出现了乱码问题,很多方法都试了,注释乱码解决了,终端又乱码,调试窗口也乱码,最后经过本人不懈努力,终于全部解决了,现在分享给大家我的方法。 乱码的原因是各个地方用的编码格式不统一,所以把他们设成统一的utf8. 1.电脑的编码格式 开始-设置-时间和语言-语言和区域 管理语言设置-更改系统区域设置-勾选Bata版:使用utf8-确定-然后按指示重启 2.vscode

记录每次更新到仓库 —— Git 学习笔记 10

记录每次更新到仓库 文章目录 文件的状态三个区域检查当前文件状态跟踪新文件取消跟踪(un-tracking)文件重新跟踪(re-tracking)文件暂存已修改文件忽略某些文件查看已暂存和未暂存的修改提交更新跳过暂存区删除文件移动文件参考资料 咱们接着很多天以前的 取得Git仓库 这篇文章继续说。 文件的状态 不管是通过哪种方法,现在我们已经有了一个仓库,并从这个仓