爬取含其他网站图片的数据时遭遇CORS拦截问题求助

你遇到的是浏览器同源策略的限制：从null源（通常是本地打开的HTML文件）发起XMLHttpRequest请求目标图片时，目标服务器没有返回Access-Control-Allow-Origin响应头，导致浏览器拦截了请求。以下是几个可行的解决办法：

• 服务器端代理请求（生产环境首选）
  不在浏览器端直接发请求，而是搭建自己的后端服务，由后端去请求目标图片资源，再把资源返回给前端。比如用Node.js实现简单代理的代码：

  const http = require('http');
  const https = require('https');
  const url = require('url');
  
  http.createServer((req, res) => {
    // 前端请求路径直接带目标图片URL，比如http://localhost:3000/https://xxx.jpg
    const targetUrl = url.parse(req.url.slice(1));
    const proxyReq = https.request({
      hostname: targetUrl.hostname,
      path: targetUrl.path,
      method: 'GET'
    }, (proxyRes) => {
      // 转发响应头和内容
      res.writeHead(proxyRes.statusCode, proxyRes.headers);
      proxyRes.pipe(res);
    });
    proxyReq.end();
  }).listen(3000);
  

  前端只需要请求自己的代理服务，就能绕过浏览器的CORS限制。

• 用img标签直接加载（仅需展示图片时用）
  如果你的需求只是展示图片，不需要获取图片二进制数据，直接用<img>标签加载就行——浏览器对img标签的跨域加载限制远低于XMLHttpRequest：

  <img src="https://truyenvua.com/128/1081/1.jpg?gt=hdfgdfg" alt="目标图片">
  

  只要目标服务器没设防盗链策略，这种方式不会触发CORS错误。

• 浏览器扩展临时绕过（仅开发测试用）
  开发阶段可以装个CORS相关的浏览器扩展，这类扩展会自动给请求添加必要的CORS头，临时解除浏览器的限制。但注意这只能用于本地测试，绝对不能用于生产环境。

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