前端在请求头添加自定义参数报跨域错误

青天紫魂

已于 2023-08-23 18:30:32 修改

阅读量603

点赞数

分类专栏： php 文章标签：前端后端

于 2023-08-23 18:27:27 首次发布

本文链接：https://blog.csdn.net/qq_38750144/article/details/132458480

版权

php 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文章讨论了在JavaScript中遇到的CORS错误，原因在于服务器端对未设置的自定义请求头进行拦截。解决方案是确保在响应头中添加Access-Control-Allow-Headers，如：Origin,X-Requested-With,Content-Type等。

摘要由CSDN通过智能技术生成

has been blocked by CORS policy: Request header field mall is not allowed by Access-Control-Allow-Headers in preflight response

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘statusText’)

在这里插入图片描
报错原因是服务器端对未设置的自定义请求头进行了拦截
需要在项目中查找到 Access-Control-Allow-Headers 进行设置

header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, roleId, Authorization");

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

青天紫魂

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
前端在请求头添加自定义参数报跨域错误

需要在项目中查找到 Access-Control-Allow-Headers 进行设置。报错原因是服务器端对未设置的自定义请求头进行了拦截。
复制链接

扫一扫

专栏目录

再遇CORS -- 自定义HTTP header的导致跨域

HaythamXu的博客

09-09

1867

指路牌后端配置好了跨域，但是前端在HTTP header添加token后，又产生跨域的问题 Flask、Vue(Axios)、跨域适用场景前后端分离，想要使用token来管理登录状态，或调用后台接口环境平台无关参考博客 axios 在header中配置token信息后，向后端请求会报跨域的问题。但是用postman测试的时候没有什么问题。这个问题的回答其实没有给出直...

Springboot解决ajax+自定义headers的跨域请求问题

10-16

这导致了在处理跨域请求时的一些挑战，尤其是在使用AJAX和自定义headers时。Spring Boot作为流行的Java后端框架，提供了优雅的解决方案来处理这类问题。首先，我们来理解什么是跨域。跨域是指一个域下的文档或脚本...

2 条评论您还未登录，请先登录后发表或查看评论

向请求头添加自定义属性，实现token功能时，出现CORS跨域导致请求失败（ has been blocked by CORS policy: ... No ‘Access-Control-All）

piglite的专栏

06-17

2751

场景：在使用 SpringBoot + Vue 进行前后端分离的开发过程中，部分功能是需要当用户登陆成功时后端（SpringBoot）向前端（Vue）返回一个token值，前端将这个token值放在以后每个请求的请求头中，后端先从拦截器中验证token值的存在，再放行请求，以确保不会被别人恶意修改、删除数据，结果出现了CORS跨域导致请求失败的情况。非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为 “预检” 请求（preflight）。由于在后端拦截器中拦截了所有的请求，

前端添加自定义请求头，请求出现跨域问题

weixin_59244784的博客

04-07

524

前端添加自定义请求头，请求出现跨域问题

ajax 自定义请求头出现跨域

weixin_44963663的博客

12-17

732

浏览器请求分为两种，简单请求和复杂请求简单的请求是满足以下所有条件的请求：允许的方法之一： GET HEAD POST 除了由用户代理自动设置的标头（例如Connection，User-Agent、或在 Fetch 规范中定义的其他标头作为禁止的标头名称)，允许手动设置请求标头 Accept Accept-Language Content-Language Content-Type （请注意以下附加要求）标题中指定的媒体类型允许的唯一类型/子类型组合Content-Type是： applic

前端设置自定义header产生跨域问题

meijishu_的博客

03-21

3876

加上自定义header后导致跨域问题问题原因: 添加自定义header会导致发送ajax后浏览器自动先发送一个预检请求(OPTIONS),预检请求中的内容是空的,所有后端的拦截器不需要对预检请求中的数据进行校验,此时的校验肯定是不通过的,导致拦截器无法放行,后续的实际请求就无法发送了,浏览器就会认为跨域出现了问题,所以就产生了跨域问题. 解决方法: 在后台的拦截器或者过滤器中对预检请求放行 ...

解决请求头新增字段跨域问题

游语

07-31

4509

问题描述在请求头中新增了用户标记字段，前端报了该字段跨域问题，postman没有。问题原因由于新增了字段到请求头中，导致了服务端跨域请求处理时没有识别到该字段，认为该请求是跨域的。问题解决 response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin")); response....

vue+axios全局添加请求头和参数操作

11-20

Vue+Axios的组合提供了便捷的方式来全局添加请求头和参数，确保每次请求都能携带必要的认证信息。本文将详细阐述如何实现这个功能。首先，登录接口通常会返回一个Token，这个Token可以用于后续的接口调用，以验证...

在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法

10-16

但是，JSONP只支持GET请求，且不支持自定义头部，因此在需要POST请求或处理复杂请求头的情况下不适用。 5. **CORS预检请求（Preflight Request）**：当请求携带了非简单HTTP方法（如POST、PUT、DELETE）或非简单...

详解AngularJS如何实现跨域请求

11-25

在上述代码中，`url`是请求的目标地址，`data`是发送的数据，而`config`则是一个可选配置对象，可以用来设置请求头、超时等参数。接下来，我们将分别探讨AngularJS中实现跨域的三种主要方法： 1. **JSONP(JSON ...

Django实现跨域请求过程详解

09-18

本文介绍了Django实现跨域请求的方法，包括了简单请求与复杂请求的概念、JsonP的基本原理及其局限性，以及如何通过自定义中间件在Django项目中实现跨域支持。通过以上步骤，开发者可以在实际项目中有效地解决跨域...

vue项目请求header中添加自定义参数报错（跨域开发）

想去旅行的静静的博客

08-04

6825

if (store.state.user.token) { config.headers.common['Authorization'] = store.state.user.token config.headers.common['token'] = store.state.user.token } else { config.headers.common['Authentication'] = '1' config.headers.common['tok.

解决http请求添加自定义头出现跨域问题

最新发布

ing的博客

07-23

198

背景是在登录认证时，需要根据用户的元信息放入到请求头中去认证。结果是因为如果增加了自定义头，那么浏览器会自动去发起OPTIONS请求。

自定义请求头后的前后端跨域设置

GIS小虫的博客

08-13

1055

前端在请求的headers里使用自定义的项传值（比如token），后端获取，看起来so easy是不是？就像这样 @ApiOperation(value = "token验证", notes = "token") @RequestMapping(value = "/tokenCheck", method = RequestMethod.GET) public CommonResult tokenCheck(@RequestHeader("X-Sso-Token") String toke...

前端跨域报错问题

qq_40088443的博客

05-15

3985

在前端用ajax访问后端的接口时，出现了提示跨域访问的错误。原因是即使端口号不一致，IP一样，也算跨域。上网差发现前端需要加上一句： <meta http-equiv="Access-Control-Allow-Origin" content="*" /> 虽然最后问题依然没解决。。还需要后端配置，但是估计也需要吧。。下次报跨域的错时，前端先加一句这个吧 ...

请求头跨域

maichaoqun的博客

11-26

5127

第一次接触nodejs+express+mongoose写接口，过程中踩坑无数，没接触过后端遇到跨域问题真的是一个接着一个问题，经过各种百度和交流群求救才解决问题，虽然我的最终问题有点坑，但还是感谢发烧友的帮助明白了这是一个请求响应头跨域问题，并且致命点在于没搞清楚响应头和请求头之间的关系，实际上响应头和请求头原来是包含关系。环境前端框架：vue-cli2.x项目请求：axios 数据库...

前端二次封装的axios请求拦截器里给请求头设置token，但是发请求报错，解决方法

abd041415的博客

11-24

841

这种情况下如果前端发请求报错，那么需要检查后端是否允许前端发请求时请求头可以带token参数，后端通过中间件设置允许接受token参数。后端设置允许接受token之后，前端每次发请求，请求头就会携带token参数了。

请求头参数类型错误：Value for header {userId: 103369} must be of type str or bytes, not ＜class ‘int‘＞

weixin_42531204的博客

09-09

452

Value for header {userId: 103369} must be of type str or bytes, not

前端测试时出现跨域错误

yvonne__my的博客

03-15

229

在开发项目时，前端会遇到跨域的问题，加上该文件解决问题 import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; impo...

ajax 中RequestHeaders添加自定义参数

06-01

在使用 AJAX 发送请求时，您可以使用 `setRequestHeader` 方法向 `XMLHttpRequest` 的请求标头中添加自定义参数。例如，如果您想要添加一个名为 `customParam`，值为 `customValue` 的自定义参数，您可以这样做： `...