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 ...
随机推荐
- 纯CSS图片缩放后显示详细信息
哎~!突然好久没更新博客了,最近总在下雨,晚上也经常没有时间来管理博客(目前在敲自己的一个平台,晢时还在写逻辑层的代码),好吧!废话不多说了,言归正传. 现在很多图片缩放的特效大多数都是用javasc ...
- 如何让CSS区别IE版本
关于IE浏览器实在太坑爹了,但你又不得不去解决它,不过就本人所知,IE8—IE10差别不大,至少本人还没有遇到过在IE8环境下到了IE9及以上版本就出现坑爹的问题,但我们又不得不面对IE8以下的版本, ...
- 必知的 15 个jQuery小技巧(干货)
jQuery小技巧(干活) 1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. $('a.top').click(function(){ ...
- 类设计的SOLID原则
SOLID原则是面向对象范式的核心 单一职责原则(Single Responsible Principle, SRP):对于一个类,应该仅有一个引起它变化的原因.其基础是内聚,表示类完成单一功能的程度 ...
- Azure IoT Hub和Event Hub相关的技术系列-索引篇
Azure IoT Hub和Event Hub相关的技术系列,最近已经整理了不少了,统一做一个索引链接,置顶. Azure IoT 技术研究系列1-入门篇 Azure IoT 技术研究系列2-设备注册 ...
- javaWeb学习总结(8)- JSP属性范围(5)
所谓的属性范围就是一个属性设置之后,可以经过多少个其他页面后仍然可以访问的保存范围. 一.JSP属性范围 JSP中提供了四种属性范围,四种属性范围分别指以下四种: 当前页:一个属性只能在一个页面中取得 ...
- JS 一条原型链扯到底
在正文之前,首先要知道两点, 1.__proto__是每个js 对象的内置属性,而prototype 是函数的内置属性,也是一个对象. 2.所谓原型,指的就是每个函数对象的prototype属性. f ...
- nodejs服务实现反向代理,解决本地开发接口请求跨域问题
前后端分离项目需要解决第一个问题就是,前端本地开发时如何解决通过ajax请求产生的跨域的问题.一般的做法是通过本地配置nginx反向代理进行处理的,除此之外,还可以通过nodejs来进行代理接口.当然 ...
- kafka 0.10.2 cetos6.5 集群部署
安装 zookeeper http://www.cnblogs.com/xiaojf/p/6572351.html安装 scala http://www.cnblogs.com/xiaojf/p/65 ...
- React模块化开发
借助前端构建工具webpack 1.webpack是facebook为react量身打造的构建工具 2.主要作用是实现模块化,代码整合,代码分割的作用 3.使用webpack整合以后 也不需要使用br ...