阿里云OSS上传下载跨域问题

OSS文件传输

使用OSS进行上传/下载操作时，时常会遇到跨域问题。
其表现为，直接通过浏览器，可以直接访问已经存储在OSS中得文件地址并下载，但是通过代码却会报跨域问题.

解决办法：登录阿里云OSS控制台，设置允许跨域.(图文详解在文尾)

示例前端代码

前端vue项目示例

---

1. 下载

    
    const scoreXml = await axios.get(scoreUrl);

2. 上传

<template>
 <upload-component @click="fnUploadRequest"/>
</template>


---

<script>
import OSS from 'ali-oss';


data:(){
	return {
		// 此配置来源于阿里云控制台
		OSSConfig: {
		    region: 'oss-cn-zhangjiakou',
		    accessKeyId: 'XFAIB4HUKbYUJKG',
		    accessKeySecret: 'UIjd89fwj9FFHW9jwf9JW8F',
		    bucket: 'ifredomBucket'
  		};
	}
},
methods:{
    async fnUploadRequest(option) {
      const client = new OSS(this.OSSConfig);

      try {
        const file = option.file;
        const OSSfileName = this.packFileName(option.file.name);
        const result = await client.put(OSSfileName, new Blob([file]));

        if (result.res.statusCode === 200) {
          return result;
        } else {
          option.onError('上传失败');
        }
      } catch (error) {
        console.error(error);
        option.onError('上传失败,请重试');
      }
    },
    // 将文件名格式化为: 文件原名_日期.后缀
    packFileName(name) {
      if (!name) {
        console.log('require at least one parameter is needed');
        return;
      }
      const point = name.lastIndexOf('.');
      const suffix = name.substr(point);
      const fileName = name.substr(0, point);
      const date = this.formatDate(new Date(), 'yyyyMMddHHmm');
      const OSSfileName = `${fileName}_${date}${suffix}`;
      return OSSfileName;
    },
	/**
	 * 将日期格式化成指定格式的字符串
	 * @param date 要格式化的日期，不传时默认当前时间，也可以是一个时间戳
	 * @param fmt 目标字符串格式，支持的字符有：y,M,d,q,w,H,h,m,S，默认：yyyy-MM-dd HH:mm:ss
	 * @returns 返回格式化后的日期字符串
	 */
	formatDate(date, fmt) {
	  date = date === undefined ? new Date() : date;
	  date = typeof date === "number" ? new Date(date) : date;
	  fmt = fmt || "yyyy-MM-dd HH:mm:ss";
	  var obj = {
	    y: date.getFullYear(), // 年份，注意必须用getFullYear
	    M: date.getMonth() + 1, // 月份，注意是从0-11
	    d: date.getDate(), // 日期
	    q: Math.floor((date.getMonth() + 3) / 3), // 季度
	    w: date.getDay(), // 星期，注意是0-6
	    H: date.getHours(), // 24小时制
	    h: date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 12小时制
	    m: date.getMinutes(), // 分钟
	    s: date.getSeconds(), // 秒
	    S: date.getMilliseconds() // 毫秒
	  };
	  var week = ["天", "一", "二", "三", "四", "五", "六"];
	  for (var i in obj) {
	    fmt = fmt.replace(new RegExp(i + "+", "g"), function(m) {
	      var val = obj[i] + "";
	      if (i === "w") return (m.length > 2 ? "星期" : "周") + week[val];
	      for (var j = 0, len = val.length; j < m.length - len; j++) {
	        val = "0" + val;
	      }
	      return m.length === 1 ? val : val.substring(val.length - m.length);
	    });
	  }
	  return fmt;
	}
}

</script>

控制台创建跨域规则

登录阿里云 — 点击进入对象存储OSS

1. 进入Bucket 列表

2. 设置–权限管理–跨域设置

3. 创建一条规则，设置内容如图: 两个星号/一个Etag

--------------如果文章对你有用，请右上角点赞，谢谢-------------