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

问题描述

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

前端 Upload 上传组件代码

<Upload
    name="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 {

    @Override
    public 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上传时跨越的问题

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

<Upload
    name="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 上传组件代码

<Upload
    name="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) => {
    // 设置头像上传状态为 true
    setImgLoading(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);
    }
    // 设置头像上传状态为 false
    setImgLoading(false);
};

再次运行上传，成功解决跨域问题

需要注意的是，这与官方文档中提到的手动上传不一样。官方文档的手动上传是选择文件后点击提交按钮实现上传。而这个方法时选择文件会将文件的相关参数传给 customRequest 的方法自定义自动上传。