Reasons for cross domain error reporting

After the video is uploaded successfully in the first place, the src of the video tag will directly introduce the resource address of the uploaded server, and then the cross domain error message will appear when using the canvas screenshot.

Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Set the video tag property crossrigin = "anonymous" according to the method on the Internet, or report an error. The reason is that the request header of the server is not set and cross domain access is not allowed.

Failed to load http://xxxx.oss-cn-shenzhen.aliyuncs.com/2018/08/22/1749/VU0SL0msslJvN1q3YNN2fmr1E4zmmE0vmHTV7A9s.mp4: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

Solution: after the video is uploaded successfully, do not introduce the online address, but still use the local video address to solve the cross domain problem.

Complete code

<template>
  <div>
    <video ref='videoView' crossorigin="anonymous" v-show="videoId" :src="videoPath" controls="controls" class="video-upload-post-preview m-box-center m-box-center-a image-wrap more-image img3"></video>
    <input ref='videofile' id="selectvideo" type="file" name="file" @change="uploadVideo" class="upload__input m-rfile">
  </div>
</template>

<script>
  import sendImage from "@/util/SendImage.js";
  export default {
    data() {
      return {
        videoId: "",
        videoPath: "",
        videoCover: ""
      }
    },
    methods: {
      uploadVideo(e) {
        let file = e.target.files[0];
        sendImage(file)
          .then(id => {
            // console.log(id)
            this.videoId = id
            this.videoPath = URL.createObjectURL(file)
            setTimeout(() => {
              this.captureImage(file);
            }, 300);
          })
          .catch(e => {
            this.$Message.error("Upload failed, please try again later");
          });
      },
      captureImage(file) {
        let video = this.$refs.videoView;
        // console.log(this.$refs, video)
        var canvas = document.createElement("canvas"); //Create a canvas 
        canvas.width = video.videoWidth * 0.8; //Set the width of canvas to the width of video 
        canvas.height = video.videoHeight * 0.8; //Set canvas height to video height 
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); //Drawing images 
        let imgBase64 = canvas.toDataURL()
        let imgFile = this.dataToFile(imgBase64)
        // console.log('img', imgFile)
        sendImage(imgFile)
          .then(id => {
            this.videoCover = id
          })
          .catch(e => {
            this.$Message.error("Upload failed, please try again later");
          });
      },
      dataToFile(urlData) {
        var bytes = window.atob(urlData.split(',')[1]); //Remove the header from the url and convert to byte  
        //Handle exception, convert ascii code less than 0 to greater than 0  
        var ab = new ArrayBuffer(bytes.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < bytes.length; i++) {
          ia[i] = bytes.charCodeAt(i);
        }
        return new Blob([ab], {
          type: 'image/jpg'
        });
      }
    }
  }
</script>