时间：2021-05-09
问题描述：axios请求后台时出现跨域问题
this.$axios .post(`http://383vm21556.eicp.vip/shgvp/ceshi`,{usernmae:username,password:password}) .then((res) => { console.log(res.data); });代码如上，这里浏览器中报了跨域的错误 一开始我们认为是后端部署出现了问题，后台小哥哥整了好久，后来经测试发现是axios出现了跨域问题(应该是和默认的post发送请求的请求头有关，axios磨人的请求头和后端普遍接收的不一致导致，但是浏览器报了跨域的错误…)，这个问题后台解决也可以。但是比较麻烦，还是在前端解决最好。我整理了三种自己解决的解决方案。
将要发送的对象中的属性写在URL中（最不推荐） this.$axios .post(`http://383vm21556.eicp.vip/shgvp/ceshi?username=${username}&password=${password}`) .then((res) => { console.log(res.data); });虽然方法很娄，但是实现了。 2. 使用jQuery的ajax
$.ajax({ url:'http://383vm21556.eicp.vip/shgvp/ceshi', type:"GET", data:{username:username,password:password}, success(data){ console.log("请求成功"); console.log(data); }, error(err){ console.log(err); console.log("请求失败"); }, complete(){ console.log("请求完成"); } })这里使用jQuery没有任何问题。 3. 设置请求对象的参数 问题的本质还是出现在了传参上，出现错误的代码哪怕是发送get请求（不传递参数）都没有问题。但是，既然出了问题总要解决。
let params=new URLSearchParams(); params.append('username',username) params.append('password',password) this.$axios // ?username=${username}&password=${password} .post(`http://383vm21556.eicp.vip/shgvp/ceshi`,params) .then((res) => { console.log(res.data); });如上，我们只是修改了参数的格式即可。我们传递了一个URLSearchParams对象，将要传递的参数append到URLSearchParams对象中把该对象发送就没有任何问题。
问题原因详解来自博客园博pubdreamcc，以下内容均来自该博主。 axios 使用 post 发送数据时，默认是直接把 json 放到请求体中提交到后端的。也就是说，我们的 Content-Type 变成了 application/json;charset=utf-8 ,这是axios默认的请求头content-type类型。但是实际我们后端要求的 ‘Content-Type’: ‘application/x-www-form-urlencoded’ 为多见，这就与我们不符合。所以很多同学会在这里犯错误，导致请求数据获取不到。明明自己的请求地址和参数都对了却得不到数据。
我们现在来说说post请求常见的数据格式（content-type）Content-Type: application/json ： 请求体中的数据会以json字符串的形式发送到后端
Content-Type: application/x-www-form-urlencoded：请求体中的数据会以普通表单形式（键值对）发送到后端，发送图片是会使用这种方式。
Content-Type: multipart/form-data： 它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。
我们使用axios的其他解决办法
修改请求头 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded 或者 {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
将参数转换为query参数, 利用qs。引入 qs ，这个库是 axios 里面包含的，不需要再下载了。
import Qs from 'qs' let user={ const username = "li", const password = "li000000" } this.$axios .post(`http://383vm21556.eicp.vip/shgvp/ceshi`,Qs.stringify(user)) .then((res) => { console.log(res.data); });修改默认的axios请求头（之前的笔记懒得改，就写在这里了）
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;
Content-Type: multipart/form-data 的使用，来自博客园博pubdreamcc这种类型的数据，我们常见前端页面上传个人图像，然后点击保存发送后端修改原始数据。解决办法下：
let params = new FormData() params.append('file', this.file) params.append('id', localStorage.getItem('userID')) params.append('userName', this.name) params.append('sex', this.sex) params.append('mobile', this.phone) params.append('email', this.email) params.append('qq', this.qq) params.append('weChat', this.WeChat) axios.post(URL, params, {headers: {'Content-Type': 'multipart/form-data'}}).then(res => { if (res.data.code === 0) { this.$router.go(-1) } }).catch(error => { alert('更新用户数据失败' + error) }) router.go(-1) } }).catch(error => { alert('更新用户数据失败' + error) })
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
