vue中的axios.post使用json数据传输,出现请求头字段内容类型是不被允许的情况的解决方案
如何解决出现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自定义头部字段的问题,貌似只有上述方法能够解决
vue中的axios.post使用json数据传输,出现请求头字段内容类型是不被允许的情况的解决方案的更多相关文章
- vue中使用axios与axios的请求响应拦截
VUE中使用Axios axios的安装 npm install axios vue-axios axios在vue的配置与使用 在main.js中引入axios和vue-axios import a ...
- vue中采用axios发送请求及拦截器
这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在 ...
- vue中使用axios最详细教程
前提条件:vue-cli 项目 安装: npm npm 在main.js导入: // 引入axios,并加到原型链中 import axios from 'axios'; Vue.prototype. ...
- vue中的axios
数据的获取最常用的就是用ajax,但在vue框架中,axios则更为方便.它是基于es6的promise 以下内容引用自[最骚的就是你] 不再继续维护vue-resource,并推荐大家使用 axio ...
- vue中封装axios方法
axios基本配置 使用方法 import axios from 'axios' // 创建axios实例 const service = axios.create({ baseURL: proces ...
- vue中使用axios发送请求
我们知道,vue2.0以后,vue就不再对vue-resource进行更新,而是推荐axios,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 1.安装axios cnpm ...
- vue中使用axios进行http通信
1.安装 npm install axios 2.在main.js中全局注册 // axios不可以通过use引入,可以通过修改vue原型链 import axios from 'axios' Vue ...
- vue中配置axios.js文件,发送请求
为了统一管理请求,每个项目都会去配置axios:而不是在vue中直接使用,那样不好维护等等 下面是我配置的最基础的axios文件 第一步:首先新建一个axios文件,我是放在router文件下的 im ...
- vue中使用axios
1.结合vue-axios使用 vue-axios是按照vue插件的方式去写的,那么结合vue-axios就可以使用Vue.use()这个方法import axios from 'axios' imp ...
随机推荐
- MySQL GROUP BY 语句
GROUP BY 语句根据一个或多个列对结果集进行分组. 在分组的列上我们可以使用 COUNT, SUM, AVG,等函数. GROUP BY 语法 SELECT column_name, funct ...
- webservice的优缺点
优点: 1.采用xml支持跨平台远程调用. 2.基于http的soap协议,可跨越防火墙 3.支持面向对象开发 4.有利于软件和数据的重用,实现松耦合. 缺点: 1.由于soap是基于xml传输,本身 ...
- 'com.example.mybatisplus.mapper.PersonMapper' that could not be found.
通常有两种原因,配置原因,或者是mapper相关文件,mapper.java或 mapper.xml内部错误 如果是配置原因 解决方式1 统一配置mapper //import org.mybatis ...
- Selenium全屏截图,使用PIL拼接滚动截图
Selenium默认的截图save_screenshot只支持对当前窗口内容进行截图,当如果你想要截取整个网页,那么,可以明确的告诉你. Selenium做不到. 你可以手工使用开发者工具Ctrl+S ...
- Js 之获取对象key值
var date = Object.keys(data); Object.keys( ) 会返回一个数组,数组中是这个对象的key值列表 所以只要Object.keys(a)[0], 就可以得只包含一 ...
- Servlet容器:Jetty和tomcat的比较
相同点: Tomcat和Jetty都是一种Servlet引擎,他们都支持标准的servlet规范和JavaEE的规范.不同点: 架构比较Jetty的架构比Tomcat的更为简单Jetty的架构是基于H ...
- StringUtils的isNotEmpty,isNotBlank方法的区别
这两个用着用着老是混淆或者忘记,今天写一下做个笔记,对比下两个判断方法的区别 isNotEmpty: 判断某字符串是否非空,等于!isEmpty(String str),这里不能排除空格字符 Stri ...
- mvc partialView断点调试问题
mvc中的partialview 在前端f12调试时,默认看不到代码的. 在Js中加上debugger; 调试时会走到断点,多出个VM打头的局部视图页面.
- MISS YOU
文章来源:刘俊涛的博客 欢迎关注,有问题一起学习欢迎留言.评论
- 一个很好的开源视频播放器GiraffePlayer2(支持rtmp,rtsp,http,https)
一个很好的开源视频播放器GiraffePlayer2(支持rtmp,rtsp,http,https) https://github.com/tcking/GiraffePlayer2 GiraffeP ...