vue中axios跨域请求
1.axios 是 第三方库
使用方法：
- 使用 npm:
$ npm install axios - 使用 bower:
$ bower install axios - 使用 cdn:
axios get 请求示例
HTML代码
Document
js代码
//get在线跨域请求 get_api_data(){ axios({ url:'https://请求地址',//在线跨域请求 method:"GET",//默认是get请求 headers:{//设置请求头 'X-Client-Info':' {"a":"3000","ch":"1002","v":"5.0.4","e":"4"}', 'X-Host': 'mall.film-ticket.film.list', }, params:{//？search后面的值写在params中 cityId: , pageNum: 1, pageSize: 10, type: 1, k: , } }).then(function(val){ console.log(val) // axios会对我们请求来的结果进行再一次的封装（ 让安全性提高 ） }).catch(function(err){ console.log(err) }) }, } }) A: 无参数 axios.get(url).then(res=>console.log(res).catch(error=>conosle.log(error)) B: 有参数 axios({ url: 'http://xxx', method: 'get' //默认就是get,这个可以省略， params: { key: value } }) axios post 请求示例
html代码
js代码 postData(){ let params = new URLSearchParams()//得到params对象，用来接收请求参数 // params.append( key, value ) key是参数名，value是参数值 //传递参数值 params.append( 'a', 2 ) params.append( 'b', 2 ) axios({ url:'http//localhost/php', method:'post', headers:{//请求头设置为表单提交的请求头 'Content-Type':"application/x-www-form-urlencoded" }, data:params, }).then( function (val) { console.log(res) }).catch( function (error) { console.log(error) }) } } 官方文档中axios post请求案例有点问题，请求会出现跨域问题； 以上示例为解决官方文档存在问题的写法； post方法总结
//对于post请求可以统一设置一个请求头，后面所有post请求就可以不用单独设置请求头了 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; // 具体语法 let params = new URLSearchParams()//得到params对象，用来接收请求参数 // params.append(key,value) //请求参数写成键值对key就是参数名，value就是参数值 params.append('a',1) params.append('b',2) axios({ url: 'http://localhost/post.php', method: 'post', data: params,//将请求参数写入data; headers: { //单个请求设置请求头 'Content-Type': "application/x-www-form-urlencoded" } }) .then(res => { console.log( res ) }) .catch( error => { if( error ){ throw error } }) 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/222771.html原文链接：https://javaforall.net
