vue中的axios.post使用json数据传输,出现请求头字段内容类型是不被允许的情况的解决方案

问题描述:

由于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自定义头部字段的问题,貌似只有上述方法能够解决

原文地址:https://www.cnblogs.com/Tohold/p/9163773.html

时间: 2024-10-08 01:09:46

vue中的axios.post使用json数据传输,出现请求头字段内容类型是不被允许的情况的解决方案的相关文章

在vue中使用axios实现跨域请求并且设置返回的数据的格式是json格式,不是jsonp格式

在vue中使用axios实现跨域请求 需求分析:在项目中需要抓取qq音乐的歌曲列表的数据,由于要请求数据的地址url=https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg.从qq音乐的官网上可以看到该请求的请求头中的referer中的域名是y.qq.com(发送请求页面的域名),而host的域名是c.y.qq.com(被请求页面的域名),由于两者不一样,所以不能通过前端直接发送请求给qq服务器去拿数据.这时候需要服务器做一个代理

06 vue中使用axios跨域

本节将展示如果通过axios+proxyTable完成跨域请求并显示数据. 1.前提约束 完成nodejs,vue-cli,webpack,webpack-dev-server的安装 https://www.jianshu.com/p/eb4d9e132f62 2.操作步骤 完成vue项目中加入easytable[这时是固定数据] https://www.jianshu.com/p/bf5abb37eb3f 下载axios依赖包 cd vue-easytable cnpm install axi

vue中采用axios发送post请求

这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在运用npm install axios的时候就会默认安装qs,因此我们就得将qs引入到axios中,然后需要再通过实例化一个新的axios,并且设置他的消息头为'content-type': 'application/x-www-form-urlencoded' 1 let qs = require

vue中使用axios最详细教程

前提条件:vue-cli 项目 安装: npm npm 在main.js导入: // 引入axios,并加到原型链中 import axios from 'axios'; Vue.prototype.$axios = axios; import QS from 'qs' Vue.prototype.qs = QS; 封装好的axios,拿走不送:(最好是在main.js同级目录创建一个 https.js 文件,复制粘贴下面代码,改 接口地址 就可以用) import axios from 'ax

记vue中封装axios

文件结构: mocks:中是本地json数据 adapter.js: 调用本地数据方法 resources.js 统一接口管理 export default { fetchDict: { url: '/v1/system/fetchDcType', method: 'post' } } 重点是以下俩个文件 index.js 拦截器以及请求头设置,并添加实例属性 import Vue from 'vue'; import axios from 'axios'; import { Toast } f

vue中使用axios post上传头像/图片并实时显示到页面

前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码: <div id="myPhoto" v-show="personalPhoto"> <div class="viewPhoto"> <img src="" alt="" id="portrait"style=&qu

Vue中封装axios

参考: https://www.jianshu.com/p/7a9fbcbb1114 https://www.cnblogs.com/dreamcc/p/10752604.html 一.安装axios npm i axios -S 二.创建src/utils/axios.js.src/api/api.js axios.js用于封装axios,api.js用于管理接口 三.axios.js // axios.js import axios from "axios"; // 部分数据需要存

axios,vue-echarts, async, vue 图表数据处理; axios 跨域代理; 异步同步请求接口;生命周期函数

1.vue-echarts 安装和组件引用 插件官网 https://github.com/ecomfe/vue-echarts 安装 npm install eacharts vue-echarts 页面引入 import ECharts from 'vue-echarts' import ECharts from 'vue-echarts' import 'echarts/lib/chart/line' // 折线图 import "echarts/lib/component/title&q

vue中使用axios

1.安装axios npm: $ npm install axios -S cdn: <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 2.配置axios 在项目中新建api/index.js文件,用以配置axios api/index.js import axios from 'axios'; let http = axios.create({ baseURL: 'http://