问题描述:

由于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.的更多相关文章

  1. 解决Bug:Size of a request header field exceeds server limit

    用了cms 发现这玩意真不好,老是有各种奇芭的问题跳出来 有时浏览网页时会出现 Bad Request Your browser sent a request that this server cou ...

  2. 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 ...

  3. 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 ...

  4. Request header field Content-Type is not allowed by Access-Control-Allow-Headers

    今天遇到一个跨域问题记录学习下: 一.问题: 跨域请求中包含自定义header字段时,浏览器console报错. Request header field xfilesize is not allow ...

  5. 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 ...

  6. 浏览器报错问题解决: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 ...

  7. 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 ...

  8. tomcat解决 java.lang.IllegalArgumentException: Request header is too large

    tomcat运行项目时,有一个请求过去后,后台报这样的错java.lang.IllegalArgumentException: Request header is too large 原因:请求头超过 ...

  9. 如何解决出现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 ...

随机推荐

  1. Jdk1.6 JUC源码解析(13)-LinkedBlockingQueue

    功能简介: LinkedBlockingQueue是一种基于单向链表实现的有界的(可选的,不指定默认int最大值)阻塞队列.队列中的元素遵循先入先出 (FIFO)的规则.新元素插入到队列的尾部,从队列 ...

  2. Zookeeper ZAB 协议分析

    前言 ZAB 协议是为分布式协调服务 ZooKeeper 专门设计的一种支持崩溃恢复的原子广播协议.在 ZooKeeper 中,主要依赖 ZAB 协议来实现分布式数据一致性,基于该协议,ZooKeep ...

  3. jQuery.validate表单校验+bootstrap

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  4. python 基本模块

    time & datetime模块 import timeimport datetime# ## # print("ss")# #time.sleep(5)# # prin ...

  5. Hibernate参数绑定的五种方式

    Hibernate参数绑定 参数绑定优点: (1)安全性 防止用户恶意输入条件和恶意调用存储过程 (2)提高性能 底层采用JDBC的PreparedStatement预定义sql功能,后期查询直接从缓 ...

  6. 利用JavaScript数组动态写入HTML数据节点

    如果想要使用数组来写入HTML数据,绝对需要的是一个Key值,由Key来引导遍历数组各项:此外,使用DOM原生方法写入文档,用同一个CSS样式渲染它们,这样可以极大地减少开发时间和减少维护成本,此方法 ...

  7. TensorFlowSharp入门使用C#编写TensorFlow人工智能应用

    TensorFlowSharp入门使用C#编写TensorFlow人工智能应用学习. TensorFlow简单介绍 TensorFlow 是谷歌的第二代机器学习系统,按照谷歌所说,在某些基准测试中,T ...

  8. javaWeb学习总结(10)- Filter(过滤器)学习(2)

    在filter中可以得到代表用户请求和响应的request.response对象,因此在编程中可以使用Decorator(装饰器)模式对request.response对象进行包装,再把包装对象传给目 ...

  9. [转载]OpenStack OVS GRE/VXLAN网络

      学习或者使用OpenStack普遍有这样的现象:50%的时间花费在了网络部分:30%的时间花费在了存储方面:20%的时间花费在了计算方面.OpenStack网络是不得不逾越的鸿沟,接下来我们一起尝 ...

  10. 详解Centos默认磁盘分区

    对于有经验的Linux系统管理员,在安装系统之前都会对系统的分区进行规划:针对这一需求,下面就通过默认的Centos分区与大家分享一些关于Linux系统的知识.Linux系统的磁盘命名规范:硬盘类型标 ...