记使用axios跨域(头允许)问题Access-Control-Allow-Headers

已于 2023-02-24 21:43:31 修改
阅读量1.5w 收藏 3
点赞数 5
分类专栏： 前端日记 文章标签： vue.js jquery javascript es6
于 2021-06-08 17:46:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40568570/article/details/117708389
版权
本文探讨了在使用axios进行跨域请求时遇到的'Access-Control-Allow-Headers'问题，特别是当POST请求包含自定义头部如token时，会触发预检请求（OPTIONS）。内容详细分析了CORS的预检机制，以及axios与jQuery AJAX在处理Content-Type上的差异，指出了后台需要允许的请求头设置，包括Accept和Authorization，并提供了解决方案。
摘要由CSDN通过智能技术生成

看此文章前你需要确定一件事
post 是否要传序列化数据:?key=“123”&name=“你”
简单请求(post get )不能有自定义请求头如：自定义token,如果有就会转化为复杂请求会进行一次预检请求 axios 发起的请求, content-type 默认是 application/json
确保后端了解复杂请求

———————————————————————分割线—————————————————————————————————————————————————

下面是我在项目中使用jquery ajax 方法在线上做的测试
记一个上线项目的跨域，使用的是 axios 跨域报错为
在这里插入图片描述
Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
跟Origin跨域有区别
Request header field content-type is not allowed by Access-Control-Allow-Origin in preflight response.

查阅大量资料后怀疑axios可能有什么问题,思来想去也就只剩下axios的复杂请求这部分可能会出问题了,为了验证我的想法我在项目上安装了Jquery并且使用ajax做了请求

在查看下面的处理之前，一定要问你家后台对前端传来的数据要求是 JSON数据 还是 序列化处理的数据你需要将POST传给后台的数据做序列化处理(Qs.stringify)也就是另一个解决方法使用QS将对象转为序列化数据但是用了POST还要前端传序列化数据，单走一个6

复杂请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为“预检”请求（preflight࿰

最低0.47元/天 解锁文章
零杠六
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax request headers,Access-Control-Allow-Headers不允许使用Ajax Request头字段
weixin_31090341的博客
08-05 718
尝试构建DNN服务框架WebAPI但我在使用CORS时遇到了麻烦.我有所有合适的标题(我认为),但它似乎仍然无法正常工作.错误:XMLHttpRequest cannot load http://www.dnndev.me/mysite/builder/API/echo?message=Hello+World&_=1412707749275. Request header field Ke...
Access-Control-Allow-Headers踩坑
A0101010的专栏
10-26 3413
后端设置跨域后在iphone6plus浏览器访问时还是报跨域错误： 浏览器错误是： 后端的跨域设置为：Access-Control-Allow-Headers:* 原因：该网页使用https访问，此时*不再看做通配符，只看做普通字符串。 官方解释为： 对于没有凭据的请求（没有HTTP cookie或HTTP认证信息的请求），值“*”仅作为特殊的通配符值。 在具有凭据的请求中，它被视为没有特殊语义的文字标头名称“ *”。 请注意，Authorization标头不能使用通配符，并且始终需要明确..
Vue3全局配置Axios并解决跨域请求问题示例详解
最新发布
aaa123aaasqw的博客
07-03 2808
在这里，我们自定义axois实例化对象，配置了默认的访问i后端ip和端口等，并在末尾使用export 导出api配置，便于在其他单文件中引入 request.ts.对于前后端分离项目，前端和后端端口不能重复，否则会导致前端或者后端服务起不来。这里提供两种解决方案，都是基于后端跨域访问的配置，前端不作任何允许跨域访问的设置，因为试过无效。（1）axios 是一个基于promise的HTTP库，支持promise所有的API。在项目根目录下，也就是src目录下创建文件夹api/，并创建。
CORS 跨域 access-control-allow-headers 的问题
热门推荐
badboyer的专栏
04-27 9万+
最近项目里需要处理跨域请求，遇到了一些问题，中间走了很多坑，深挖了很多细节，受益良多。 cors在跨域解决方案中算是很好用的，网上资料一大堆，只需要在服务器端进行配置即可。 配置方法网上也很多，我简单记录下， 主要用到cors-filter-1.7.jar 和java-property-utils-1.9.jar 这两个jar包,其实cors-filter jar包最新的已经出到2.5了
使用axios自定义headers字段，报错 Authorization is not allowed by Access-Control-Allow-Headers
weixin_40918145的博客
01-19 3435
Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response 核心需要在后台设置 httpResponse.setHeader("Access-Control-Allow-Header", "Origin, Content-Type, Author...
axios请求在ie浏览器报错 Access-Control-Allow-Headers 列表中不存在请求标头 authorization
dujyong的博客
04-22 5745
ie浏览器报错,其他浏览器正常,上图: 原因: vue axios 跨域请求，请求头不传token时，所有浏览器都能成功，在请求头中传token，在谷歌浏览器和火狐正常，在ie浏览器报错,因此可以得出是请求头token的问题, 解决: 标准的head，认证名字叫做Authorization，A要大写，但是在vue用axios跨域请求时，传的head名称为authorization，是小写，所以即...
Access-Control-Allow-Headers
weixin_30925411的博客
03-12 1730
Requestheaderfield XXXX isnotallowedbyAccess-Control-Allow-Headersinpreflightresponse. 解决方案：Nginx 添加 add_header Access-Control-Allow-Headers 'xxxx'; 添加需要放行的head 转载于:https://www.cnblogs....
解决方案 ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’
12-20
2. **考虑其他CORS相关头部**：除了`Access-Control-Allow-Origin`，你可能还需要设置其他CORS相关的头部，如`Access-Control-Allow-Methods`(允许的方法)，`Access-Control-Allow-Headers`(允许的自定义头部)，以及...
Quasar Vue Springboot 跨域问题 No 'Access-Control-Allow-Origin' header is present on the requested
Sail__的专栏
01-01 5377
困扰了近半个月的跨域问题解决了。 服务端是Springboot，前端是Vue 服务端地址是：http://localhost:8066 前端地址是：http://localhost:6006 前端发送请求使用的是axios，之前设置的baseURL是 process.env.BASE_API， 这个baseURL我在别的地方没有指定，因此是空，后来发现静态图片一直加载不上，我把baseUR...
使用axios的post出现Request header field content-type is not allowed by Access-Control-Allow-Headers问题
Maple_Night的博客
04-20 508
欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示； 增加了 图片
Access-Control-Allow-Origin 响应一个携带身份信息(Credential)的HTTP请求时,必需指定具体的域，不能用通配符
欧阳惜竹的博客
12-23 1756
Access-Control-Allow-Origin。HTTP响应头，指定服务器端允许进行跨域资源访问的来源域。可以用通配符*表示允许任何域的JavaScript访问资源，但是在响应一个携带身份信息(Credential)的HTTP请求时，Access-Control-Allow-Origin必需指定具体的域，不能用通配符。 前端项目用的axios，在同事随手复制的一个axios的封装文件中找到了这行代码 axios.defaults.withCredentials = true 当设置withCred
Axios解决跨域问题（Vue2版）
weixin_43565079的博客
09-13 6万+
什么是跨域 首先需要了解到浏览器的同源策略，同源策略是最核心也是最基本的安全功能，缺少同源策略浏览器的正常功能可能会受到影响。同源策略会阻止一个域的javascript脚本和另外一个域的能容进行交互。同源（即指在同一个域）就是两个页面具有相同的协议（protocol）、主机（host）和端口号（port）。 当一个请求url的协议、域名、端口三个之间任意一个与当前页面url不同即为跨域。 Vue中用Axios解决跨域问题 配置代理可解决使用Axios不能直接进行跨域...
Access-Control-Allow-Headers 跨域
管家 的博客
03-29 8005
使用 ant design pro 的时候，发现 umi-request 没有暴露token 的接口 自己手动使用umi-request 提供的拦截器，自己在 header 中添加了拦截器， 遇到了 Access-Control-Allow-Headers 跨域问题 经过排查发现问题是，Authorization 写成了 token， 手误害死人啊。。。 正确的写法： header...
Vue axios 的使用与跨域问题
ili_ii的博客
01-31 1万+
在前端开发中, 我们一种常见的网络请求方式就是JSONP使用JSONP最主要的原因往往是为了解决跨域访问的问题。JSONP的原理是什么呢?JSONP的核心在于通过标签的src来帮助我们请求数据。原因是我们的项目部署在服务器上时, 是不能直接访问服务器上的资料的，会产生跨域问题。这个时候, 我们利用标签的src帮助我们去服务器请求到数据, 将数据当做一个javascript的函数来执行, 并且执行的过程中传入我们需要的json。
浏览器跨域 Access-Control-Allow-Headers 问题
m0_51513185的博客
09-20 328
Access-Control-Allow-Headers 当浏览器发送接口请求出现跨域问题时，目前的做法通常会在接口服务器增加如下配置。 Access-Control-Allow-Origin: *但是有时也会出现 Access-Control-Allow-Headers 的错误问题。 Access to XMLHttpRequest at'http://www.xxx.com/api' from...
解决 Axios 跨域问题，轻松实现接口调用
LiamHong_的博客
09-15 1万+
Axios 跨域常用的解决方法有 CORS、JSONP、代理等，开发环境可通过代理服务器实现跨域，CORS 需要服务端设置 Access-Control-Allow-Origin 响应头，JSONP 只支持 GET 请求。选择适合项目需求的解决方案能够很好地解决跨域问题，保障应用的正常运行。FastAPI 与 Flask：Python Web 两大流行框架综合对比Axios 怎么通过 FormData 对象上传文件？跨源资源共享（CORS） - HTTP | MDN。
axios设置允许跨域，设置headers的问题
zy451的博客
05-14 3490
在跟随视频学习时遇到一个问题 检查代码后发现是没有设置headers，添加 response.setHeader('Access-Control-Allow-Headers', '*'); 解决问题 若还有错误 可以在引入axios的script中加入 crossorigin="anonymous" 若还不行，可以尝试将axios的headers中的内容改为 headers: { name: 'zy451',
Access-Ctrol-Allow-Headers:*兼容问题导致的跨域失败
letterTiger的博客
05-05 2783
现象： 通过抓包看到在部分客户端上跨域的非简单请求只发送一个预检的OPTIONS请求，之后的真实请求并没有发送。 出现问题的环境： 部分IOS低版本系统。 windows系统微信内必现（2020-04-29）。 分析 通过上面条件OPTIONS请求发送成功，但是实际请求没有发送，可以推断出是服务端相关HTTP头没有设置正确，导致客户端认为服务端不允许当前源上的web应用跨域访问该资源，所以后面真正...
axios怎么设置Access-Control-Allow-Origin解决跨域问题
08-22
在使用axios发送跨域请求时，可以通过设置服务器的响应头来解决跨域问题。其中，设置"Access-Control-Allow-Origin"字段可以指定允许的域名或通配符，实现跨域访问的授权。 在服务器端，需要在响应头中设置"Access-Control-Allow-Origin"字段。例如，如果你想允许所有来源的请求，可以设置该字段的值为"*"。 对于Node.js服务器，可以使用以下代码来设置响应头： ```javascript const express = require('express'); const app = express(); app.use((req, res, next) => { res.setHeader('Access-Control-Allow-Origin', '*'); next(); }); // 其他路由和中间件... app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` 这样就可以允许所有来源的请求跨域访问你的服务器。 请注意，使用通配符"*"来设置"Access-Control-Allow-Origin"字段可能存在安全风险，因为它允许任何网站都可以访问你的服务器资源。在生产环境中，建议根据实际需求设置允许访问的域名，例如： ```javascript res.setHeader('Access-Control-Allow-Origin', 'http://example.com'); ``` 这将只允许"http://example.com"域名下的请求跨域访问你的服务器。 另外，还可以设置其他相关的响应头字段，例如"Access-Control-Allow-Methods"和"Access-Control-Allow-Headers"来进一步控制跨域请求的行为。 希望这些信息能够帮到你！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值