fabric.js里添加图片因为跨域问题无法正常渲染和canvas污染无法保存问题

最新推荐文章于 2024-08-08 11:56:55 发布

原创

最新推荐文章于 2024-08-08 11:56:55 发布 · 1.6k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#fabric #canva可画

fabric.js里添加图片因为跨域问题无法正常渲染和canvas污染无法保存问题

问题

会报两种错误，要么保存新图片时报错，要么插入图片渲染时报错：

图片插入到画布成功了，画布保存新图片时报错。
图片无法插入到画布，直接提示CORS报错。

我在网上查询了很多资料，有说fabric.js没有配置跨域，后端没有配置跨域，浏览器缓存原因等等，这些都遗漏了一个比较常见根本的因素，往下继续看。

前提检查

前提是我们需要使用img标签的crossorigin="anonymous"来测试前后端是否产生跨域问题，如果后端服务器没有正确配置图片资源的跨域问题，是无法显示图片的，会报跨域的错误。
在浏览器控制台中我们能看到没有配置跨域的图片响应头是这样的：

在这里插入图片描述
在响应头中是并没有看到Access-Control-Allow-Origin: *；那么这个请求就会被浏览器规则所拦截无法正常渲染。

解决方法

有人疑惑说我后端明明在头部加了header(Access-Control-Allow-Origin: *)呀，为什么还是无法渲染，关键的问题是在nginx上，针对http:xxx/static/1.png这种图片链接，我们需要在nginx的location /static/ { … }中一定要加入add_header跨域配置！！！

 server{
   
   
        listen 80;
        server_name xxx.xxx.xxx.xxx;
        index index.html index.htm index.php;
        root  /www/wwwroot/xxx.xxx.xxx.xxx/frontEnd/build;
        include enable-php.conf;
        access_log  /www/wwwlogs/access.log;
        
          location /static/ {
   
   
            alias /www/wwwroot/xxx.xxx.xxx.xxx/static/; #静态资源路径
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 'DELETE,PATCH,PUT,VIEW,GET, POST, OPTIONS';
            add_header Access-Control-Allow-Headers 'ACCEPT,Accept-Encoding,AUTHORIZATION,ORIGIN,Access-Token,DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
          }
          location / {
   
   
            proxy_pass http://127.0.0.1:8000;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            
          }
    }