使用elementui的头像上传组件报错

Question

不知道是我前端的问题？还是后端的问题？请问这个组件默认就是post传值。对吧？是否需不需要再去设置请求协议什么的呢？
`Access to XMLHttpRequest at 'http://11.11.11.232:8082/api/userinfo/avatar' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
element-ui.common.js?ccbf:29068 POST http://11.11.11.232:8082/api/userinfo/avatar net::ERR_FAILED
在请求的凭据模式包含时，响应预飞请求的值不能通过访问控制检查：响应请求的值不能是通配符“”。当请求的凭据模式包含时，请求中的XMLHttpRequest的值不能是通配符“”。XMLHttpRequest发起的请求的凭据模式由withCredentials属性控制。
创建一个新的社区，创建一个新的社区社区，创建一个新的社区，创建一个新的社区，创建一个新的社区。`
如图：

附代码：

      <div class="avatar-upload">
        <!--            avatar-upload-inner avatar-uploader-->
        <el-upload
          class="avatar-uploader"
          :action="uploadUrl"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :on-error="handleError"
          :before-upload="beforeAvatarUpload"
          :data="uploadAvatarParams"
          name="avatar"
          :with-credentials='true'
        >
          <el-avatar :src="form.avatarUrl" :size="140"></el-avatar>
          <div class="upload-btn">
            <i class="iconfont">&#xe60a;</i>
            <span>修改我的头像</span>
          </div>
        </el-upload>
      </div>

data：

data() {

return {
  uploadUrl: axios.defaults.baseURL + 'api/userinfo/avatar',
  uploadAvatarParams: {
    uid: localStorage.getItem("userid"),
    token: localStorage.getItem("token")
  },
  form: {
    avatarUrl: '',
    nickname: '',
    sex: '',
    intro: '',
    birthday: '',
  },
};

},

js：

// 上传头像
handleAvatarSuccess(res, file) {
  console.log(res)
  // this.form.avatar=res.data.data
  this.form.avatarUrl = URL.createObjectURL(file.raw)
  console.log('上传图片成功')
},
handleError() {
  console.log('图片上传失败')
},
beforeAvatarUpload(file) {
  console.log(file.type)
  const isSupportedFormat = file.type === 'image/jpeg' || file.type === 'image/png'
  const isLte10M = file.size / 1024 / 1024 <= 10

  if (!isSupportedFormat) {
    this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!')
  }
  if (!isLte10M) {
    this.$message.error('上传头像图片大小不能超过 10MB!')
  }
  return isSupportedFormat && isLte10M
},

Answer 1

当请求头设置withCredentials: true 时，响应头里的 Access-Control-Allow-Origin 不能是 '*' 。
必须是指定的地址,你发起请求的地址是 http://localhost:8080, 响应头应该是这样 Access-Control-Allow-Origin: http://localhost:8080 才不会被跨域拦截。

Answer 2

跨域问题，让后端同学处理吧，或者使用proxy代理

Answer 3

这个上传特殊在你的配置项：
:with-credentials='true'
他的意思是请求要携带身份凭证credentials，比如cookie，
需要后端在响应头加入 Access-Control-Allow-Credentials: true ，否则就会被拦截。
如果你需要携带cookie，可以找后端帮忙加入响应头，如果不需要，可以把这个配置项设置为false
或者通过该组件的自定义上传覆盖默认上传行为http-request