在vue项目中使用element的Upload搭建上传功能,报跨域问题

  • 根据官方提供实例
 
   点击上传
   
>

开发前已使用cors解决项目跨域问题,
!CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)
项目中修改请求头header信息,向后台的发生非简单请求。非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight),预检成功后发送数据请求。
但是upload发送预检请求成功,第二次请求报跨域问题,后端人员也没有查找除问题。

  • 自定义封装请求(使用formDate)

          点击上传
        

myUpload(content) {
        let formData = new FormData();
        formData.append('logo',content.file); // 'file[]' 代表数组 其中`file`是可变的
        request.post(content.action, formData).then(rs=>{
          this.$store.dispatch('GetInfo')
        }).catch(err=>{
          this.$store.dispatch('LogMessage', "用户头像上传失败!")
          console.log(err)
        })
      },

自定义请求,把上传文件封装成formData对象,通过axois进行请求,运行成功!!!

  • 使用inoput自定义上传组件

你可能感兴趣的:(在vue项目中使用element的Upload搭建上传功能,报跨域问题)