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

问题描述

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

前端 Upload 上传组件代码


    {imageUrl ? (
      avatar
    ) : (
      uploadButton
    )}

后端处理跨域代码

/**
 * 全局跨域配置
 */
@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("*");
    }
}

上传提示跨域错误
关于 Ant Design 的 Upload 组件使用 action 自动上传出现跨域问题的解决_第1张图片
关于 Ant Design 的 Upload 组件使用 action 自动上传出现跨域问题的解决_第2张图片
网上有文章说在组件中直接设置请求头 header 属性 X-Requested-With:null 就能解决。解决Antd使用upload组件上传文件,使用action上传时跨越的问题

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


    {imageUrl ? (
      avatar
    ) : (
      uploadButton
    )}

但是并没有啥用,X-Requested-With 属性是没了,但跨域问题还是没有解决。
关于 Ant Design 的 Upload 组件使用 action 自动上传出现跨域问题的解决_第3张图片

解决办法

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

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

关于 Ant Design 的 Upload 组件使用 action 自动上传出现跨域问题的解决_第4张图片
修改前端 Upload 上传组件代码


    {imageUrl ? (
      avatar
    ) : (
      uploadButton
    )}

// 处理上传
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);
};

再次运行上传,成功解决跨域问题
关于 Ant Design 的 Upload 组件使用 action 自动上传出现跨域问题的解决_第5张图片
需要注意的是,这与官方文档中提到的手动上传不一样。官方文档的手动上传是选择文件后点击提交按钮实现上传。而这个方法时选择文件会将文件的相关参数传给 customRequest 的方法自定义自动上传。

你可能感兴趣的:(问题解决,前端,react,ant,design)