vue 图片转base64本地路径跨域

问题描述

代码

getUrlBase64(url, ext, callback) {
                    var canvas = document.createElement("canvas");   //创建canvas DOM元素
                var ctx = canvas.getContext("2d");
                var img = new Image;
                img.crossOrigin = 'Anonymous';//外网访问必须加否则会报错
                img.src = url;
                img.onload = function () {
                    canvas.height = 140; //指定画板的高度,自定义
                    canvas.width = 120; //指定画板的宽度，自定义
                    ctx.drawImage(img, 0, 0, 140, 120); //参数可自定义 高度，宽度
                    var dataURL = canvas.toDataURL("image/" + ext);
                    callback.call(this, dataURL); //回掉函数获取Base64编码
                    canvas = null;
                };

            },

解决方案

1、采用nginx 进行监听端口进行转发

resPre:'http://localhost:8083/fileApi',

server{
		listen       8083;
        server_name  localhost 192.168.0.13;
		root   "路径";
		# 该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。
		add_header 'Access-Control-Allow-Origin' '*';
		# 该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。
		#  默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，
		#  Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，
		#  如果服务器不要浏览器发送Cookie，删除该字段即可
		add_header 'Access-Control-Allow-Credentials' 'true';
		# 该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法，上例是PUT。
		add_header 'Access-Control-Allow-Methods' '*';

		#end 允许指定域名跨域访问，根据自己情况修改
		#ssl配置省略
         location / {
            rewrite  ^.+fileApi/?(.*)$ /$1 break;//fileApi 前缀
            proxy_pass  http://localhost:8085;    #node api server 即需要代理的IP地址
            proxy_redirect off;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         }
		
	}

2、把图片放在项目目录下面，也就是同一个地址下面。