使用vue-cropper时，展示oss图片出现跨域问题解决

<vue-cropper ref="cropper" id="cropper"
             :img="options.img" :info="true" :autoCrop="options.autoCrop"
             :autoCropWidth="options.autoCropWidth" :autoCropHeight="options.autoCropHeight"
             :fixedBox="options.fixedBox" @realTime="realTime">
vue-cropper>

data() {
    return {
        options: {
            // 裁剪图片的地址
            img: '',
            // 是否默认生成截图框
            autoCrop: true,
            // 默认生成截图框宽度
            autoCropWidth: 200,
            // 默认生成截图框高度
            autoCropHeight: 200,
            // 固定截图框大小 不允许改变
            fixedBox: true
        }
    }
}

methods: {
     // 打开更换头像modal框
	edit() {
		this.visible = true;
		let _this = this;
		// 设置头像base64
         // 其中this.avatar为当前头像
		this.setAvatarBase64(this.avatar, (base64) => {
			_this.options.img = base64;
		});
	},
	// 设置头像base64
	setAvatarBase64(src, callback) {
		let _this = this;
		let image = new Image();
		// 处理缓存
		image.src = src + '?v=' + Math.random();
		// 支持跨域图片
		image.crossOrigin = "*";
		image.onload = function () {
			let base64 = _this.transBase64FromImage(image);
			callback && callback(base64);
		}
	},
	// 将网络图片转换成base64格式
	transBase64FromImage(image) {
		let canvas = document.createElement("canvas");
		canvas.width = image.width;
		canvas.height = image.height;
		let ctx = canvas.getContext("2d");
		ctx.drawImage(image, 0, 0, image.width, image.height);
		// 可选其他值 image/jpeg
		return canvas.toDataURL("image/png");
	}
}

解决问题的思路，考虑到既然这里直接展示https图片会出现跨域问题，而其他地方不会，说明不是服务端的问题，而且在这种情况下，从oss控制台配置也没用。

那么，采用另外一种思路，将图片先转换为base64格式，再进行赋值展示。