本文是自己在是使用axios向一个服务器请求数据的过程中遇到的一些问题，更文记录记录
需求是这样的，使用Vue制作一个简单的网页，需要实现一个表单提交到服务器，可以从服务器获取到数据，可以上传图片等资源到服务器上。
要求：
文字接口数据格式为 x-www-form-urlencoded
图片接口与数据格式为 form-data
https请求包含Basic Auth
怎么样，看着是不是很简单，现在看确实也很简单，但对于昨天一个前端新人(还没有踩过坑)来说，首先Basic Auth是啥我都没见过(还是见识少了啊)
Basic Auth是什么呢
先百度走一波哈哈哈
通过百度，我明白了这是服务器设置了 HTTP Basic Auth ，在使用浏览器访问时会弹出对话框，需要输入用户密码，于是我在浏览器上输入了url
咦，还真是，然后输入用户名密码顺利得到了数据，原谅我没见过世面的样子
这是在浏览器上访问，那么怎么通过代码访问呢？
上代码
axios({
url: "",
method: "",
//在请求里加上下面这个就好啦
auth: {
username: '用户名',
password: '密码'
}
data: data
})
当然，可以使用axios.create()配置好，这样就不用每个请求都写这几行代码了
跨域问题
当我发送请求时看到了这个，我就知道事情不一样了，这不是跨域问题嘛，因为我还没处理过这种问题，只闻其名不见其形，所以，好吧我坦白，我不会处理，百度大大我又来了
跨域问题是什么
跨域问题时浏览器对于请求的安全限制，一个页面发起的请求只能是与当前页面域名相同的路径，这样能有效阻止跨站攻击
解决方案
跨域问题的解决方案分为前端和后端(后端也能解决跨域问题)
这里就展示一下配置axios的方法(目前我也只会这个哈哈哈)
main.js文件
import axios from 'axios'
axios.defaults.baseURL = '/api'
config/index.js文件
proxyTable: {//在这里面加入一下内容
'/api': {
target:'', // 你请求的第三方接口
changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite:{ // 路径重写，
'^/api': '' // 替换target中的请求地址
}
}
然后在需要发送请求的地方url写接口后面的内容就好了，一般是域名后/后面的内容
文件类型上传
获取文件
multiple是可以选择多个文件
<input type="file" accept="image/*" multiple="multiple" @change="honor" ref="ipts">
处理数据
//改变选择文件执行
honor(){
let inputDOM = this.$refs.ipts;
this.honors = inputDOM.files;
},
//提交数据
honorSubmit(){
let formData = new FormData();
//多个文件时变量名变成imageName0，imageName1等
for(let i=0;i<this.honors.length;i++){
formData.append('imageName'+ i, this.honors[i]);
}
axios({
url: "",
method: "",
auth: {
username: '',
password: ''
},
headers: {
'Content-Type': 'multipart/form-data',
},
data: formData
}).then(res=>{
console.log(res)
}).catch(res=>{
console.log(res);
})
}
踩坑
为什么标题要加上踩坑篇呢，那肯定不是因为我见了个我没见过的东西，解决个跨域问题就完了，踩坑的意思就是非常非常白痴的问题还卡了很久
其一
在上文跨域问题的解决中，在修改完配置文件后，一定一定一定要记得把项目重新跑一遍，平时修改页面代码 Ctrl+S 就可以看到效果习惯了，结果还百思不得其解
其二
axios请求数据类型的默认值是json，在使用application / x-www-form-urlencoded格式时，默认情况下会将数据序列化为JSON，所以需要qs库去做转换
//引入qs后
qs.stringify(数据对象)
总结
以上内容基本上都是百度到的，只是自己记录一下，希望每天都能够学习到一些新东西
