通常一些小型的项目,没必要大费周章的搭建脚手架,直接以CDN的方式引入vue.js 即可享受到vue的便利性
那么我们想用到vue中的一些功能,比如axios 呢。
axios使用post方法时传输数据给后台默认为json格式,有时会导致跨域问题,如下图:
image.png
axios本质还是Ajax,而Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准。而json是一种数据交换格式,前台一般要发给后台的数据都是json格式的,但这就导致后台需要对json进行解析,而且json文件也会导致ajax的跨域问题。在vue-resource中,我使用的解决方法是使用它本身封装的方法:jsonp方法,来解决跨域问题,即通过添加script标签,通过里面的src来解决跨域问题。
而axios中则有另外一种方法,即qs,使用qs的stringify方法,可以将前端中的对象转换为字符串格式发送给后端,不仅利于解析,也能解决跨域问题。
使用qs只需要在要使用qs的组件里引入,然后直接使用它的方法即可
注意:Axios与Qs必须配合使用,否则后台会拿不到数据
CDN引入:
Axios:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Qs:
<script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>
使用方法:
let isurl = "www.xxxxx.com/list";
let o={
id:2
}
axios.post(isurl,Qs.stringify(o)).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
axios.post 修改header头的方法:
axios.post(isurl,Qs.stringify(o),{'
header:{
'Content-Type': 'multipart/form-data'
}
})