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

不知道是我前端的问题？还是后端的问题？请问这个组件默认就是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="https://segmentfault.com/q/1010000023810449/form.avatarUrl" :size="140"></el-avatar>
<div class="upload-btn">
<i class="iconfont"></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
},

回答

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

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

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

以上是 使用elementui的头像上传组件报错 的全部内容， 来源链接： utcz.com/a/41058.html

回到顶部