OSS上传视频资源跨域问题解决

记录问题:

前言:

由于项目中遇见需要上传资源到OSS,前端同事要求视频资源跨域才能满足功能需求。

查询Oss官方文档

https://help.aliyun.com/document_detail/31870.html?spm=a2c4g.90564.0.0.692d7492iqW2lo

解决:

在初始化OSSClient的实例后,在进行指定跨域资源共享规则的容器CORSRule的初始化和设置

OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
        try {
            SetBucketCORSRequest request = new SetBucketCORSRequest(bucketName);

            // 跨域资源共享规则的容器,每个存储空间最多允许10条规则。
            ArrayList<SetBucketCORSRequest.CORSRule> putCorsRules = new ArrayList<SetBucketCORSRequest.CORSRule>();

            SetBucketCORSRequest.CORSRule corRule = new SetBucketCORSRequest.CORSRule();

            ArrayList<String> allowedOrigin = new ArrayList<String>();
            // 指定允许跨域请求的来源。
            allowedOrigin.add("*");

            ArrayList<String> allowedMethod = new ArrayList<String>();
            // 指定允许的跨域请求方法(GET/PUT/DELETE/POST/HEAD)。
            allowedMethod.add("GET");
            allowedMethod.add("PUT");
            allowedMethod.add("DELETE");
            allowedMethod.add("POST");
            allowedMethod.add("HEAD");

            ArrayList<String> allowedHeader = new ArrayList<String>();
            // 是否允许预取指令(OPTIONS)中Access-Control-Request-Headers头中指定的Header。
            allowedHeader.add("*");
            ArrayList<String> exposedHeader = new ArrayList<String>();
            // 指定允许用户从应用程序中访问的响应头。
            // AllowedOrigins和AllowedMethods最多支持一个星号(*)通配符。星号(*)表示允许所有的域来源或者操作。
            corRule.setAllowedMethods(allowedMethod);
            corRule.setAllowedOrigins(allowedOrigin);
            // AllowedHeaders和ExposeHeaders不支持通配符。
            corRule.setAllowedHeaders(allowedHeader);
            corRule.setExposeHeaders(exposedHeader);
            // 指定浏览器对特定资源的预取(OPTIONS)请求返回结果的缓存时间,单位为秒。
            corRule.setMaxAgeSeconds(60);

            // 最多允许10条规则。
            putCorsRules.add(corRule);
            // 已存在的规则将被覆盖。
            request.setCorsRules(putCorsRules);
            // 指定是否返回Vary: Origin头。指定为TRUE,表示不管发送的是否为跨域请求或跨域请求是否成功,均会返回Vary: Origin头。指定为False,表示任何情况下都不会返回Vary: Origin头。
            // request.setResponseVary(Boolean.TRUE);
            ossClient.setBucketCORS(request);
        }catchException e){
            ....
        }finally {
            // 关闭流
            ossClient.shutdown();
        }
上传成功
您好!对于ElementUI和阿里云OSS的分片上传视频跨域问题,您可以通过配置CORS规则来解决。 首先,在阿里云OSS的控制台中,找到您的存储空间,并进入"域名管理"页面。然后,点击您要使用的域名,进入该域名的详细设置页面。 在页面下方的"CORS配置"部分,点击"添加规则"按钮,然后按照以下步骤进行配置: 1. 在"允许的来源"中填写您的网站域名,例如:"http://example.com"。 2. 在"允许的方法"中选择"GET"、"PUT"、"POST"、"DELETE"、"HEAD",这些方法是常用的上传操作所需要的。 3. 在"允许的头部信息"中填写"Content-Type",这是常用的上传请求头部信息。 4. 在"暴露的头部信息"中填写"ETag"和"Content-Length",这些是常用的响应头部信息。 完成上述配置后,保存并退出设置页面。 接下来,在您使用ElementUI进行文件上传的代码中,需要在请求头中添加一些特定的头部信息,以允许跨域请求。具体代码如下: ```javascript this.$refs.upload.uploadFiles.forEach(file => { file.headers = { 'Access-Control-Allow-Origin': 'http://example.com', 'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, HEAD', 'Access-Control-Allow-Headers': 'Content-Type' }; }); ``` 请将上述代码中的"http://example.com"替换为您的网站域名。 通过以上配置和代码修改,您应该能够解决ElementUI和阿里云OSS分片上传视频跨域问题。希望对您有帮助!如有任何疑问,请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值