为何跨域AJAX GET请求返回错误？附图片URL请求示例

先看你写的代码，有几个关键问题直接导致了请求失败，咱们一个个拆解：

1. 用JSONP请求静态图片完全不对路 #

JSONP的本质是通过加载一段JavaScript代码实现跨域，它只适用于返回JS脚本的接口。但你请求的是一张JPG图片，内容是二进制图像数据，浏览器拿到后会尝试把它当作JS解析，这肯定会触发语法错误——这就是你看到请求失败的核心原因。

2. Access-Control-Allow-Origin是响应头，不是请求头 #

你在headers里设置了这个字段，但这个头是**服务器用来告诉浏览器“哪些域名可以跨域访问我”**的响应头，请求时发给服务器完全没用，服务器根本不会处理这个请求头。

3. 跨域处理图片的正确姿势 #

如果只是想加载图片 #

根本不需要用AJAX，直接创建<img>元素就行，浏览器会自动处理跨域加载：

var imageUrl = "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/izgwruSFWIvA/v1/1200x621.jpg";
const img = new Image();
img.src = imageUrl;
img.onload = () => {
    console.log("图片加载成功啦");
};
img.onerror = () => {
    console.log("图片加载失败了");
};

如果需要获取图片的HTTP响应头 #

那得用支持CORS的请求方式，前提是目标服务器允许跨域访问这张图片（也就是服务器会返回正确的Access-Control-Allow-Origin响应头）。用fetch就很方便：

var imageUrl = "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/izgwruSFWIvA/v1/1200x621.jpg";
fetch(imageUrl, {
    method: 'GET',
    mode: 'cors' // 默认就是cors模式，可省略
})
.then(response => {
    console.log("所有响应头：", response.headers);
    // 比如获取Content-Type头
    console.log("图片类型：", response.headers.get('Content-Type'));
    return response.blob(); // 把响应转成二进制blob
})
.then(blob => {
    // 要是需要显示图片，可以把blob转成临时URL
    const tempImgUrl = URL.createObjectURL(blob);
    const img = document.createElement('img');
    img.src = tempImgUrl;
    document.body.appendChild(img);
})
.catch(err => {
    console.log("请求出错：", err);
});

总的来说，你选了错误的跨域方案，还搞错了请求头的用法，才导致请求报错。根据你的实际需求选对应的方法就没问题啦。

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