JavaScript 中 fetch 跨域请求图片并携带 Cookie 需设 credentials: 'include'，且服务端必须返回 Access-Control-Allow-Origin（具体域名）和 Access-Control-Allow-Credentials: true；img 标签原生不支持凭据，须用 fetch + blob + URL.createObjectURL 方式加载。
在 JavaScript 中用 fetch 请求跨域图片资源并携带凭据（如 Cookie），关键在于正确设置 credentials 选项，并确保服务端允许凭据和指定源。
必须设置 credentials: 'include'
默认情况下，fetch 跨域请求不会发送 Cookie。要带上凭据（如登录态 Cookie），需显式指定 credentials: 'include'：
- 使用
'include'：始终发送 Cookie（即使跨域） - 不能用
'same-origin'（默认值）或'omit'，否则 Cookie 不会随请求发出 - 注意：
'include'要求响应头中必须有Access-Control-Allow-Origin的具体域名，不能是通配符*
服务端必须配合响应头
浏览器会先发预检（OPTIONS）请求，只有服务端明确允许，实际请求才会发出。后端需返回：
-
Access-Control-Allow-Origin: https://your-frontend-domain.com（不能为*） -
Access-Control-Allow-Credentials: true（必需） - 若涉及自定义头（如
Authorization），还需加Access-Control-Allow-Headers
例如 Node.js + Express 中可这样设置：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
res.header('Access-Control-Allow-Origin', 'https://your-app.com');
res.header('Access-Control-Allow-Credentials', 'true');
res.header('Access-Control-Allow-Methods', 'GET, OPTIONS');
加载图片的两种常用方式
直接用 fetch 获取图片 Blob 并赋给 <img>：
- 先
fetch(url, { credentials: 'include' }) - 调用
response.blob()得到二进制数据 - 用
URL.createObjectURL()生成本地 URL，再设给img.src
示例代码：
fetch('https://api.example.com/image.jpg', {
credentials: 'include'
})
.then(res => {
if (!res.ok) throw new Error('图片加载失败');
return res.blob();
})
.then(blob => {
const url = URL.createObjectURL(blob);
document.getElementById('myImg').src = url;
})
.catch(err => console.error(err));
注意 img 标签自身不支持 credentials
直接写 <img src="https://xxx.com/photo.jpg"> 无法携带 Cookie，因为 HTML 原生标签不提供凭据控制机制。必须通过 fetch + blob + objectURL 绕行，或改用服务端代理（前端请求同域接口，由后端转发并带 Cookie）。
