Laravel+Vue使用html2canvas转HTML为图片时遭遇CORS跨域错误

问题描述 #

在Laravel+Vue项目里用html2canvas把HTML转成图片时碰到了CORS跨域错误。试过设置crossorigin=""或者anonymous都没用，但朋友用谷歌存储的图片链接就能正常下载。图片明明能在src里正常显示，可html2canvas生成图片时就出错，最后生成的图片里没有图片内容，想知道有没有能绕过CORS限制的html2canvas替代库。

相关代码 #

Vue中html2canvas实现代码 #

convertToImage() {
  const element = document.getElementById('image-id');
  html2canvas(element, { 
    allowTaint: true,
    useCORS: true,
   }).then((canvas) => {
    const image = canvas.toDataURL('image/png');
    const link = document.createElement('a');
    link.href = image;
    link.download = 'generatedImage.png';
    link.click();
  });
},

Laravel中间件请求头设置代码 #

public function handle(Request $request, Closure $next)
{
    return $next($request)
    ->header('Access-Control-Allow-Origin', ['*'])
    ->header('X-Frame-Options', 'DENY')
    ->header('X-XSS-Protection', '1; mode=block')
    ->header('X-Content-Type-Options', 'nosniff')
    ->header('Strict-Transport-Security', 'max-age=31536000; includeSubDomains')
    ->header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS')
    ->header('Access-Control-Allow-Headers','X-Requested-With, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding');
}

错误信息 #

Access to image at 'https://www.google.de/images/srpr/logo11w.png' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
中文翻译：从源地址http://127.0.0.1:8000访问图片https://www.google.de/images/srpr/logo11w.png被CORS策略阻止：请求的资源上不存在Access-Control-Allow-Origin头。

解决方案 #

核心原因 #

你的Laravel中间件设置只对自己服务的资源生效，谷歌这类外部图片服务器没配置允许你的源访问的CORS规则，所以html2canvas读取图片时触发了浏览器的同源策略限制——浏览器允许直接显示跨域图片，但不允许canvas读取跨域图片的像素数据（这是为了防止隐私泄露）。

替代html2canvas的库 #

1. dom-to-image

这个库和html2canvas功能类似，处理跨域图片的逻辑不同，部分场景下能绕过限制。用法示例：

import domtoimage from 'dom-to-image';

convertToImage() {
  const element = document.getElementById('image-id');
  domtoimage.toPng(element)
    .then((dataUrl) => {
      const link = document.createElement('a');
      link.href = dataUrl;
      link.download = 'generatedImage.png';
      link.click();
    })
    .catch((error) => {
      console.error('转换失败', error);
    });
}

如果还是触发CORS，可以试试先用domtoimage.toSvg转成SVG，再把SVG转成图片——SVG对跨域图片的限制相对宽松。

2. html-to-image

这是dom-to-image的分支维护版本，修复了不少旧bug，兼容性更好。用法和dom-to-image几乎一致：

import * as htmlToImage from 'html-to-image';

convertToImage() {
  const element = document.getElementById('image-id');
  htmlToImage.toPng(element)
    .then((dataUrl) => {
      const link = document.createElement('a');
      link.href = dataUrl;
      link.download = 'generatedImage.png';
      link.click();
    })
    .catch((err) => {
      console.log(err);
    });
}

不换库的解决办法：后端代理 #

如果不想替换库，最稳妥的方式是通过Laravel后端代理跨域图片：

1. 在Laravel里新建一个路由和控制器，负责请求第三方图片并返回给前端
2. 前端把图片src改成代理地址，这样请求的是自己域名下的资源，不会有CORS问题

示例代码：

// routes/web.php
Route::get('/proxy-image', [ImageProxyController::class, 'proxy']);

// app/Http/Controllers/ImageProxyController.php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;

class ImageProxyController extends Controller
{
    public function proxy(Request $request)
    {
        $url = $request->query('url');
        if (!$url) abort(400, '缺少图片URL参数');

        try {
            $response = Http::get($url);
            return response($response->body())
                ->header('Content-Type', $response->header('Content-Type'));
        } catch (\Exception $e) {
            abort(500, '代理请求失败');
        }
    }
}

前端修改图片src：

<!-- 原src -->
<img src="https://www.google.de/images/srpr/logo11w.png">
<!-- 修改后 -->
<img :src="`/proxy-image?url=${encodeURIComponent('https://www.google.de/images/srpr/logo11w.png')}`">

内容的提问来源于stack exchange，提问作者RedBlue