不知道是我前端的问题?还是后端的问题?请问这个组件默认就是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"></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
才不会被跨域拦截。