vue中axios的post请求,415错误的问题
目录
- vue axios的post请求415错误
- 415错误
- 需求分析
- vue-axios的get、post请求
- get方式：axios请求数据核心代码
- post方式：不用写headers
- 总结
vue axios的post请求415错误
415错误
415是HTTP协议的状态码415的含义是不支持的媒体类型(Unsupported media type)检查是否在POST请求中加入了headerheader中是否包含了正确的Content-Type
需求分析
需求：请求本地平台上数据库的表单数据
问题：请求415错误
原因：请求格式头问题
我想请求的是表单数据，但是一直默认是请求json数据，因为没有后端的原因，需要前端解决。
方法：
axios({
method: 'post',
url: 'http://localhost:8080/jsaas_war/restApi/sys/queryForJson?alias=three¶ms',
data: JSON.stringify(),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
//下面这段代码
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
}).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
其中发挥关键作用的是headers与transformRequest。其中 headers 是设置即将被发送的自定义请求头。
transformRequest 允许在向服务器发送前，修改请求数据。
这样操作之后，后台querystring.parse(decodeURIComponent(data))获取到的就是类似于{ name: ‘w’, password: ‘w’ }的对象。
另外一种办法就是后端去改，本文就不作具体解释了。。。
vue-axios的get、post请求
- 直接在控制台上打印axios会报错，打印fetch就不会；
- 因为fetch是标准，axios是第三方，要想用axios，就必须引入想应的js文件；
- axios-js文件下载：npm
- 搜索axios，点进去，往下找：
- 打开链接：“https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js”，ctrl+s保存源码，就下载好了；
- 然后引入到html中就可以使用了。
get方式：axios请求数据核心代码
axios.get("./test.json").then(res => {
console.log(res)
//数据在res.data.data.films里
console.log(res.data.data.films)
})
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../lib/vue.js"></script>
<script src="axios.min.js"></script>
</head>
<body>
<div id="box">
<button @click="handleClick">axios</button>
</div>
<script>
new Vue({
el:"#box",
data:{
},
methods:{
handleClick(){
axios.get("./test.json").then(res => {
console.log(res)
//数据在res.data.data.films里
console.log(res.data.data.films)
})
}
}
})
</script>
</body>
</html>
结果：
post方式：不用写headers
携带的信息放在第二个参数位置上就可以了，不用写其他的；
handleClick(){
axios.post("./test.json","name=yiyi&age=100").then(res => {
console.log(res)
//数据在res.data.data.films里
console.log(res.data.data.films)
})
}
axios.post("./test.json",{name:"yiyi",age:100})
axios请求数据的方式比fetch方式更简单，直接一个then就可以；
而且post方式还不用写headers，直接写数据，会自动查看你携带的数据是什么类型；
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
Vue中使用axios调用后端接口的坑及解决
目录 axios调用后端接口的坑 问题场景 总结了如下场景 调用后端接口 使用axios跨域问题 首先找到项目中vue.config.js axios调用后端接口的坑 问题场景 Vue.js工程中使用axios调用后端接口(SpringBoot构建)出现后端接口无法获得数据的情况 总结了如下场景 @RequestParam用来处理application/x-www-form-urlencoded编码(HTTP协议请求头中不指定Content-Type默认就是application/x-www-f
-
Vue简单封装axios之解决post请求后端接收不到参数问题
1.在src/下新建api文件夹,api/下新建index.js和public.js 在public.js中: import axios from 'axios'; import qs from 'qs' import router from '../router' import { MessageBox} from 'mint-ui' // 注意点,按照以下写 var instance = axios.create(); instance.defaults.timeout = 10000; i
-
vue中this.$http.post()跨域和请求参数丢失的解决
目录 this.$http.post()跨域和请求参数丢失 this.http.post()参数需注意 this.$http.post()跨域和请求参数丢失 methods: { research: function () { //post请求远程资源 this.$http.post( //请求的url "http://www.hefeixyh.com/login.html", //请求参数,不能以get请求方式写:{params: {userName: "root123&q
-
详解vue中axios请求的封装
axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库:封装axios,一方面为了以后维护方便,另一方面也可以对请求进行自定义处理 安装 npm i axios 封装 我把axios请求封装在http.js中,重新把get请求,post请求封装了一次 首先,引入axios import axios from 'axios' 设置接口请求前缀 一般我们开发都会有开发.测试.生产环境,前缀需要加以区分,我们利用
-
vue项目中axios的封装请求
目录 一.简介 二.封装后 1.封装步骤 2.封装目标 3.使用新的axios封装API 4.使用封装后的axios 一.简介 axios 是一个轻量的HTTP客户端,它基于 XMLHttpRequest 服务来执行 HTTP 请求,支持丰富的配置,支持 Promise,支持浏览器端和 Node.js 端.自Vue2.0起,尤大大宣布取消对vue-resource 的官方推荐,转而推荐 axios.现在 axios 已经成为大部分 Vue 开发者的首选.( 如果你还不熟悉 axios,可以在这里
-
vue中axios处理http发送请求的示例（Post和get）
本文介绍了vue中axios处理http发送请求的示例(Post和get),分享给大家,具体如下: axios中文文档 https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format axios文档 在处理http请求方面,已经不推荐使用vue-resource了,而是使用最新的axios,下面做一个简单的介绍. 安装 使用node npm install axios 使用cdn <scrip
-
vue中axios防止多次触发终止多次请求的示例代码（防抖）
需求 例如在搜索框中,并不是你输入一个字就需要渲染一次数据,而是取最后一次的输入内容进行搜索. 连续按下 AAAAA ,只取最后一次按下时搜索框的内容(即:AAAAA)进行搜索. 而不是搜索跟 A(第一次按下),AA(第二次按下),AAA相关联的内容 本文例子: 检测用户输入的值,监测这个值,然后根据值调用接口查询结果 代码: <template> <input type="text" v-model="message"> <temp
-
Vue中 axios delete请求参数操作
vue中axios 的delete和post,put在传值上有点区别 post和put有三个参数,url,data和config,所以在使用这两个时,可以写成axios.post(api,{id:1}),axios.put(api,{id:1}),但是delete只有两个参数:url和config,data在config中,所以需要写成 axios.delete(api,{data:{id:1}}) 如果是服务端将参数当作Java对象来封装接收则 参数格式为: {data: param} var
-
Vue中Axios中取消请求及阻止重复请求的方法
目录 阻止请求目的: 常见情况: 新建 axios.js 文件 全局 main.js 引入 阻止请求目的: 为了防止用户在网络不好或者其他情况下短时间内重复进行接口请求,从而导致前端向后端重复发送多次请求. 常见情况: PC端:输入框搜素,多次请求接口移动端:移动端很容易造成误操作或多操作请求(移动端没有点击延迟)注意:有Loading遮罩时也有可能发生重复请求 新建 axios.js 文件 import axios from "axios"; // import router fro
-
vue中axios解决跨域问题和拦截器的使用方法
vue中axios不支持vue.use()方式声明使用. 所以有两种方法可以解决这点: 第一种: 在main.js中引入axios,然后将其设置为vue原型链上的属性,这样在组件中就可以直接 this.axios使用了 import axios from 'axios'; Vue.prototype.axios=axios; components: this.axios({ url:"a.xxx", method:'post', data:{ id:3, name:'jack' } }
-
Vue 中axios配置实例详解
1.GET 请求 //向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 也可以通过 params 对象传递参数 axios.get('/user', { params: { ID: 12345 } }) .then(function (respons
-
详解vue中axios的使用与封装
分享下我自己的axios封装 axios是个很好用的插件,都是一些params对象,所以很方便做一些统一处理 当然首先是npm安装axios 很简单$ npm install axios --save 在src下新建文件夹 service / index.js 接着上代码 import axios from 'axios'; import { Toast} from 'mint-ui';// 我用的mint的框架来弹出我的错误返回 大家可以用别的提示 import router from '..
-
vue中axios实现数据交互与跨域问题
1. 通过axios实现数据请求 vue.js默认没有提供ajax功能的. 所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互. 注意,axios本质上就是javascript的ajax封装,所以会被同源策略限制. 下载地址: https://unpkg.com/axios@0.18.0/dist/axios.js https://unpkg.com/axios@0.18.0/dist/axios.min.js axios提供发送请求的常用方法有两个:axio