JS解决OSS上传跨域问题

1 篇文章 0 订阅
1 篇文章 0 订阅

废话不多说直接上代码

 var xhr = new XMLHttpRequest();
 var action = "" //oss链接
    xhr.withCredentials = false;
          xhr.open("POST", action);
          xhr.onload = () => {
            console.log(xhr.response); //输出结果
            if (xhr.response.indexOf("<Key>")) {
              let id = xhr.response.split("<Key>")[1].split("</Key>")[0];
              if (id == ossKey) {
                this.form.taskId = taskId;
                this.form.fileName = fileName;
              }
            }
          };
          //form参数
          var formData = new FormData();
          formData.append("ossid", ossInfo.ossid);
          formData.append("key", ossKey);
          formData.append("policy", ossInfo.policy);
          formData.append("ossAccessKeyId", ossInfo.ossAccessKeyId);
          formData.append("success_action_status", 201);
          formData.append("signature", ossInfo.signature);
          formData.append("file", this.textarea);
          xhr.send(formData);
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
您好!对于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分片上传视频的跨域问题。希望对您有帮助!如有任何疑问,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

搬砖的小编

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值