时间: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磨人的请求头和后端普遍接收的不一致导致,但是浏览器报了跨域的错误…),这个问题后台解决也可以。但是比较麻烦,还是在前端解决最好。我整理了三种自己解决的解决方案。

  1. 将要发送的对象中的属性写在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)
  1. Content-Type: application/json : 请求体中的数据会以json字符串的形式发送到后端

  2. Content-Type: application/x-www-form-urlencoded:请求体中的数据会以普通表单形式(键值对)发送到后端,发送图片是会使用这种方式。

  3. 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)
        })
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐