当我使用vue碰上跨域问题时

最近和同学在写一个项目时，用到了element-ui。当时是要实现一个头像上传的功能，因为以前还没用过这个组件来写，用的很生疏。当我遇到跨域问题的时候，还以为是组件用的不对，当时我是这样写的：

<el-upload
  class="avatar-uploader img"
  :headers="Myheader"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload"
  action="http://XXXXXXXXXXX"
  >
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

当时的报错是authorization，我使用了代理服务器，请求头也把该加的加上了，所以应该不是寻常的跨域报错，于是我以为是组件使用不当导致的Authorization变成了authorization。因为当时其他请求都写的没有毛病，于是我在网上找了半天资料后，改成了如下：

<el-upload
  class="avatar-uploader img"
  :headers="Myheader"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload"
  action=""
  :http-request="upload"
>
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

下面是对应的函数

handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        console.log(res)
      },
      beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
      },
      upload(param) {
        var formData = new FormData()
        formData.append('file', param.file)
        http.put('http://XXXXXX/user/basic/updateUserAvatar', formData).then(
          response => {
          alert('上传图片成功')
          console.log(response)
        }).catch(err => {
          alert('图片上传失败')
          console.log(err)
          console.log(param.file)
          formData.forEach((value, key) => {
              console.log(`key ${key}: value ${value}`);
          })
        })
      }

这样写的，这样一来，原先由组件封装好的函数进行上传，现在则变成了由自己写的函数进行上传。我想着这样一来这块用的就和其他请求没什么区别了，但是很遗憾，还是报错了。最后一行一行的查找了半天，发现了原因，url我使用的是"http://XXXXXX/user/basic/updateUserAvatar"，因为自己有在拦截器里加前面的XXXXXX及之前的部分，所以报错了，删除之后就好了。