Canvas图片跨域污染源于浏览器CORS策略，Nginx可通过配置Access-Control-Allow-Origin等响应头解决；需确认真实跨域、正确设置Nginx静态资源或代理透传CORS头，并在前端Image中声明crossOrigin="anonymous"。
Canvas图片跨域污染导致 toDataURL() 或 toBlob() 报错，本质是浏览器安全策略限制——只要图片资源来自不同源（协议、域名、端口任一不同），且未显式声明允许跨域，Canvas 就会被标记为“污染”，禁止读取像素或导出数据。Nginx 本身不处理 Canvas 渲染逻辑，但它能通过配置响应头，协助后端或静态资源服务正确透传/设置 Access-Control-Allow-Origin 等 CORS 头，从而从源头避免污染。
确认图片请求是否真正跨域
很多问题其实卡在「误判跨域」：比如前端用 http://localhost:3000 访问，图片地址却是相对路径 /img/logo.png，实际仍是同源；但若写成 https://api.example.com/img/logo.png，才构成跨域。打开浏览器开发者工具的 Network 面板，点击图片请求，查看 Response Headers 中是否有 Access-Control-Allow-Origin。没有？说明服务端（或 Nginx）没配好 CORS。
Nginx 配置图片资源支持跨域（静态文件场景）
如果你的图片放在 Nginx 直接托管的静态目录（如 /var/www/images/），需在对应 location 块中添加响应头：
location /images/ {
alias /var/www/images/;
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
<pre class="brush:php;toolbar:false;"># 处理预检请求
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
}
⚠️ 注意：Access-Control-Allow-Origin: * 不支持携带凭据（如 cookies）。如果前端设置了 credentials: 'include'，必须指定具体域名，例如 add_header 'Access-Control-Allow-Origin' 'https://your-app.com';，同时要加 add_header 'Access-Control-Allow-Credentials' 'true';。
代理后端接口或图床时透传 CORS 头
若图片由后端 API 动态返回（如 /api/image?id=123），而该 API 已正确设置 CORS 头，但经过 Nginx 反向代理后头丢失，需确保 Nginx 不过滤这些响应头：
- 默认情况下 Nginx 会丢弃部分自定义响应头，用
proxy_pass_request_headers on;（通常默认开启，可不写） - 关键是要启用
proxy_hide_header的反向操作：**不要屏蔽** CORS 相关头，即避免出现类似proxy_hide_header Access-Control-Allow-Origin; - 更稳妥的做法是显式透传：
proxy_pass_request_headers on;<br> proxy_set_header Host $host;<br> proxy_set_header X-Real-IP $remote_addr;
只要后端返回了正确的 Access-Control-Allow-Origin，Nginx 默认就会原样转发（前提是没用 proxy_hide_header 拦截）。
前端加载图片时务必声明 crossOrigin
Nginx 配好了，前端也得配合。即使服务端已支持 CORS，如果 JS 创建 Image 对象时没设 crossOrigin 属性，浏览器仍按「匿名模式」发起请求，服务端即使返回了 CORS 头也不会被信任：
const img = new Image();
img.crossOrigin = 'anonymous'; // ✅ 必须加这一行
img.src = 'https://cdn.example.com/photo.jpg';
img.onload = () => {
canvas.getContext('2d').drawImage(img, 0, 0);
canvas.toDataURL(); // 此时不再报错
};注意：crossOrigin="anonymous" 表示不带凭据的跨域请求；若需 cookies，用 "use-credentials"，此时服务端 Access-Control-Allow-Origin 不能为 *，且必须返回 Access-Control-Allow-Credentials: true。
