### 0、前言
axios插件，在跨域时，发送POST请求，是会将请求分成2次，第一次请求为OPTIONS类型，但验证通过后，则会改为POST请求。
同时请求的参数需要进行特殊转换。

### 1、安装qs插件
`qs`插件是一个json对象操作库，可用于对应axios的传参进行特殊转换，使用以下命令进行安装：
`npm install qs`

### 2、修改全局常量文件
```
// 全局常量定义
// v1.0.1

// 引入ajax包
import axios from 'axios'
// 设置ajax请求地址，解决跨域问题
const isPro = Object.is(process.env.NODE_ENV, 'production')
// 左为生产环境，右为测试环境
// const baseUrl = isPro ? 'http://juncms.zgnyw.xin/api/' : 'api/';
// 如果你的接口与项目不是同一域名下，可直接将baseUrl设置为对应的接口地址即可，例如：
const baseUrl = 'http://juncms.zgnyw.xin/api/';
axios.defaults.baseURL = baseUrl;

// 引入qs包
import qs from 'qs'

// 常量表
const config = {
    // ajax插件
    axios:axios,
    // qs插件
    qs:qs,
    // 版本号
    edition:'v1.0.1',
    // 项目名称
    entry_name:'Vue2测试项目'
}

// 常量定义函数
let bindToGlobal = (obj, key) => {
     if (typeof window[key] === 'undefined') {
         window[key] = {};
     }

for (let i in obj) {
         window[key][i] = obj[i]
     }
}
bindToGlobal(config,'_config')
```

### 3、修改.vue模板的传参方法
```
<template>
<div id="app">
    <button v-on:click="submit">注册</button>
</div>
</template>

export default {
    methods: {
         submit: function(event) {
            _config.axios.post('/user', _config.qs.stringify({
                    name: 'wise',
                    info: 'wrong'
            })).then(function (response) {
                // 成功回调
                console.log(response);
            })
            .catch(function (error) {
                // 异常监听
                console.log(error);
            });
        }
    }
}
</script>
```

已有0条评论

添加新评论☺

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助

已有0条评论

添加新评论☺