2019-08-02 vue.js2.0 单页面使用Axios

通常一些小型的项目，没必要大费周章的搭建脚手架，直接以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'
    }
})