前端解决图片跨域问题vue-cropper组件“has been blocked by CORS policy: No ‘Access-Control-Allow-Origin“

直接上问题

vue-cropper解决图片跨域问题

遇到这个问题主要是跨域请求,
一般情况下用js把图片转base64传输就能解决

// 设置头像base64
    setAvatarBase64(src, callback) {
      let _this = this;
      let image = new Image();
      // 处理缓存
      image.src = src + '?v=' + Math.random();
      // 支持跨域图片
      image.crossOrigin = "Anonymous";
      image.setAttribute('crossOrigin', 'anonymous')
      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");
    }

上述代码返回的是一个base64图片字符串，直接当成img传入vue-cropper即可

七牛云解决图片跨域问题

由于本人使用的七牛云作为文件服务,七牛云不开启https不会存在跨域问题,开启了https需要做以下处理

• 第一步

  打开七牛云控制台
  空间管理 -> 空间设置 -> 跨域设置
  

• 第二步

  
  点击域名管理，选择域名配置
  
  

总结

完成上述所有配置基本可以大部分图片跨域问题,当然有其他文件服务器按上述配置下响应头即可,还有什么其他情况遇到的问题欢迎评论补充(*￣︶￣)