vue-cli3 video 联调跨域配置<canvas> video crossorigin="anonymous"

由于在canvas位图中的像素可能来自多种来源，包括从其他主机检索的图像或视频，因此不可避免的会出现安全问题。所以在使用 video 标签时设置 crossorigin="anonymous"

nginx 配置

{
    location / {
      root /opt/media
      index index.html index.htm
      add_header 'Access-Control-Allow-Origin' '*';
      add_header 'Access-Control-Allow-Credentials' 'true';
      add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTION';
    }
}

vue.config.js 配置

devServer: {
    proxy: { 
        '/api': {
            target: 'http://localhost:3000',               
            // 开启跨域功能，参考文章只说了这里                
            changeOrigin: true,                
            // 没有说重写路径是必须配置，但是不配置是不生效的                
            pathRewrite: {                    
                '/api': ''                
            }            
         }        
    }
}

参考文章：developer.mozilla.org/zh-CN/docs/…