关于 Ant Design 的 Upload 组件使用 action 自动上传出现跨域问题的解决

问题描述

使用 Ant Design 的 Upload 组件时，可以通过 action 属性指定上传地址实现选择文件自动上传。但在我选择文件上传后浏览器控制台一直出现跨域错误。关键我已经在后端处理了跨域，还是一直会出现跨域错误。而且其它请求都可以正常处理跨域，就是使用 action 的自动上传就会出现跨域问题。

前端 Upload 上传组件代码

<Uploadname="userAvatar"listType="picture-circle"className="avatar-uploader"showUploadList={false}maxCount={1}action="http://localhost:8101/file//upload/oss"beforeUpload={beforeUpload}
>{imageUrl ? (<img src={imageUrl} alt="avatar" style={{ width: '100%' }} />) : (uploadButton)}
</Upload>

后端处理跨域代码

/*** 全局跨域配置*/
@Configuration
public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {// 覆盖所有请求registry.addMapping("/**")// 允许发送 Cookie.allowCredentials(true)// 放行哪些域名（必须用 patterns，否则 * 会和 allowCredentials 冲突）.allowedOriginPatterns("*").allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS").allowedHeaders("*").exposedHeaders("*");}
}

上传提示跨域错误
在这里插入图片描述

网上有文章说在组件中直接设置请求头 header 属性 X-Requested-With:null 就能解决。解决Antd使用upload组件上传文件，使用action上传时跨越的问题

也就是说上传组件写成这样

<Uploadname="userAvatar"listType="picture-circle"className="avatar-uploader"showUploadList={false}maxCount={1}action="http://localhost:8101/file//upload/oss"beforeUpload={beforeUpload}headers={{'X-Requested-With' : null}}
>{imageUrl ? (<img src={imageUrl} alt="avatar" style={{ width: '100%' }} />) : (uploadButton)}
</Upload>

但是并没有啥用，X-Requested-With 属性是没了，但跨域问题还是没有解决。
在这里插入图片描述

解决办法

既然问题解决不了，那就绕过问题，不使用 action 的方式实现自动上传，自己发起请求实现。

通过查看官方文档，Upload 组件有个 customRequest 属性，可以覆盖默认的上传行为，自定义自己的上传实现。详细的解释可以参考这篇文章：ant design Upload组件的使用总结

在这里插入图片描述
修改前端 Upload 上传组件代码

<Uploadname="userAvatar"listType="picture-circle"className="avatar-uploader"showUploadList={false}maxCount={1}action="http://localhost:8101/file//upload/oss"beforeUpload={beforeUpload}customRequest={handleUpload}
>{imageUrl ? (<img src={imageUrl} alt="avatar" style={{ width: '100%' }} />) : (uploadButton)}
</Upload>

// 处理上传
const handleUpload = async (files) => {// 设置头像上传状态为 truesetImgLoading(true);// 封装上传数据const params = {biz: 'user_avatar',};// 发起上传请求try {const res = await useOssUploadFileUsingPost(params, {}, files.file);if (res.code === 0) {// 上传成功，将返回头像地址进行设置回显setImageUrl(res.data);message.success('头像上传成功');} else {message.error('上传失败：' + res.message);}} catch (e: any) {message.error('上传失败' + e.message);}// 设置头像上传状态为 falsesetImgLoading(false);
};