9.如何解决出现AXIOS的Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
问题描述:
由于restful接口需要在头部header传递两个字段:
Content-Type: application/json
Access-Token: 84c6635800b14e0eba4f7ece65e095a1
但是,在vue.js里面配置:

执行发送的时候出现:

意思是预发请求的时候不通过,不再正式发请求
经过反复的测试,发现,header里面包含自定义字段,浏览器是会先发一次options请求,如果请求通过,则继续发送正式的post请求,而如果不通过则返回以上错误
那这样就只能在服务端配置options的请求返回,代码如下:
// TODO 支持跨域访问
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "*");
response.setHeader("Access-Control-Allow-Headers", "Content-Type,Access-Token");
response.setHeader("Access-Control-Expose-Headers", "*"); if (request.getMethod().equals("OPTIONS")) {
HttpUtil.setResponse(response, HttpStatus.OK.value(), null);
return;
}
上面代码需要加入允许的头部,content-type和access-token,并且判断请求的方法是options的时候,返回ok(200)给客户端,这样才能继续发正式的post请求。
修改之后成功发了post请求。
PS:
看了网上这么多解释,基本都用不到,关于AXIOS自定义头部字段的问题,貌似只有上述方法能够解决
9.如何解决出现AXIOS的Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.的更多相关文章
- 解决Bug:Size of a request header field exceeds server limit
用了cms 发现这玩意真不好,老是有各种奇芭的问题跳出来 有时浏览网页时会出现 Bad Request Your browser sent a request that this server cou ...
- axios跨域请求报错:Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
在做项目时,用到axios,数据用post提交时,老是报错,错误提示为: Access to XMLHttpRequest at 'http://127.0.0.1:3000/api/add' fro ...
- post请求(headers里有属性)报错:Request header field xxx is not allowed by Access-Control-Allow-Headers in preflight response
post 请求,headers里有属性(xxx).请求时报错: XMLHttpRequest cannot load <url>. Request header field xxx is ...
- Request header field Content-Type is not allowed by Access-Control-Allow-Headers
今天遇到一个跨域问题记录学习下: 一.问题: 跨域请求中包含自定义header字段时,浏览器console报错. Request header field xfilesize is not allow ...
- Failed to load http://localhost:8080/team.php: Request header field x-jwt-header is not allowed by Access-Control-Allow-Headers in preflight response.
axios 加入header之后,请求出现 Failed to load http://localhost:8080/team.php: Request header field x-jwt-head ...
- 浏览器报错问题解决:Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight respons
FAQ: Failed to load http://www.erpshop.com/index.php: Request header field Content-Type is not allow ...
- Request header field * is not allowed by Access-Control-Allow-Headers in preflight response问题解决
跨域问题报错信息为:Failed to load http://192.168.30.119: Request header field language is not allowed by Acce ...
- tomcat解决 java.lang.IllegalArgumentException: Request header is too large
tomcat运行项目时,有一个请求过去后,后台报这样的错java.lang.IllegalArgumentException: Request header is too large 原因:请求头超过 ...
- 如何解决出现AXIOS的跨域问题:Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
转载:https://www.cnblogs.com/caimuqing/p/6733405.html 问题描述: 由于restful接口需要在头部header传递两个字段: Content-Type ...
随机推荐
- DevCloud让代码检查更科学
代码检查是软件开发工作中不可或缺的一部分,众所周知,规范化的编码是一个优质项目的保证.华为软件开发云(DevCloud)便提供了专业科学的自动化代码检查工作. 一.华为软件开发云(DevCloud)目 ...
- 关于struts2 Could not find action or result错误
今天来配置这个S2SH框架的的时候,刚把环境搭建好,启动时并没有报错,但是当我写了一个action,我也准备通过这个action来访问页面,但是这里我访问的时候却给我报Could not find a ...
- 【2017-05-21】WebForm跨页面传值取值、C#服务端跳转页面、 Button的OnClientClick属性、Js中getAttribute和超链接点击弹出警示框。
一.跨页面传值和取值: 1.QueryString - url传值,地址传值 优缺点:不占用服务器内存:保密性差,传递长度有限. 通过跳转页面路径进行传值,方式: href="地址?key= ...
- .nomedia文件的作用
.nomedia文件的作用:应用中的图片不被系统图库扫描. 一般开发的应用中会缓存一些图片到本地,不想让系统图库扫描到应用的图片或者不想对用户浏览图片造成影响. .nomedia文件放在任何一个文件夹 ...
- 浅谈 Java 主流开源类库解析 XML
在大型项目编码推进中,涉及到 XML 解析问题时,大多数程序员都不太会选用底层的解析方式直接编码. 主要存在编码复杂性.难扩展.难复用....,但如果你是 super 程序员或是一个人的项目,也不妨一 ...
- UNIX文件I/O
第一次用markdown语法写博客,写出来的还比较整齐,感觉博客园对序号的支持不是很好,调了一会才有了比较满意的效果,还有有哪位知道使用markdown如何插入frame? 这边博客主要说了APUE中 ...
- cuda学习2-block与thread数量的选取
由上一节可知,在main函数中,cuda程序的并行能力是在add<<<N,1>>>( dev_a, dev_b, dev_c )函数中体现的,这里面设置的是由N个b ...
- spark 2.1.0 集群安装
jdk安装 http://www.cnblogs.com/xiaojf/p/6568426.html scala2.11 安装 http://www.cnblogs.com/xiaojf/p/6568 ...
- ECS_8080端口连接拒绝问题排查
原文链接 用户ECS网络设置 上图是用户ECS的网络示意图: ecs处于vpc网络下 ecs加入了一个安全组,该安全组出入方向均开放8080端口 ecs有两个网卡,一个私网主网卡(有虚线的网卡),一个 ...
- be 动词
be 动词:表达人或事物的状态,即身份.性质.特征状态等 be动词 在翻译里面我们称之为缺项词,在我们的文化中很难找到一个具体的词汇与之像应对,我们只能用一个句子去解释它. be动词主要是用来表达人或 ...