如何下载被CORS限制的图片？爬取图片遇CORS错误求助

问题根源 #

你用$.get()请求图片，这方法本来是用来获取文本数据的，而图片属于二进制文件，用它请求会直接导致解析错误；另外还大概率会碰到目标网站的跨域限制，浏览器会直接拦截你的请求。

具体解决办法 #

1. 直接用图片标签加载（最简单方案） #

要是只是想展示图片，别用AJAX请求，直接创建img元素就行，浏览器会自动处理二进制资源，不会出现解析问题：

const img = new Image();
img.src = 'https://truyenvua.com/128/1081/1.jpg?gt=hdfgdfg';
img.onload = () => {
    console.log('图片加载成功');
    document.body.appendChild(img); // 把图片添加到页面
};
img.onerror = (err) => console.error('加载失败:', err);

2. 绕开跨域限制（如果是跨域导致的拦截） #

如果目标网站设置了CORS禁止前端跨域请求，就得搭个后端代理——让自己的服务器去请求图片资源，前端再从自己的服务器获取：
比如用Node.js快速搭建代理：

// 先安装依赖：npm install express axios
const express = require('express');
const axios = require('axios');
const app = express();

app.get('/proxy-image', async (req, res) => {
    try {
        const imgResponse = await axios.get('https://truyenvua.com/128/1081/1.jpg?gt=hdfgdfg', { responseType: 'stream' });
        imgResponse.data.pipe(res); // 将图片流返回给前端
    } catch (err) {
        res.status(500).send('代理请求失败');
    }
});

app.listen(3000, () => console.log('代理服务器运行在3000端口'));

之后前端直接请求自己的代理地址：http://localhost:3000/proxy-image即可。

3. 必须用AJAX获取二进制数据的场景 #

如果需要对图片的二进制内容做处理，要修改AJAX的响应类型为blob，避免默认的文本解析逻辑：

$.ajax({
    url: 'https://truyenvua.com/128/1081/1.jpg?gt=hdfgdfg',
    method: 'GET',
    responseType: 'blob', // 指定获取二进制Blob类型
    success: (blob) => {
        console.log('拿到图片Blob数据:', blob);
        // 转成可展示的URL
        const imgUrl = URL.createObjectURL(blob);
        const img = new Image();
        img.src = imgUrl;
        document.body.appendChild(img);
    },
    error: (err) => console.error('请求失败:', err)
});

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