fetch下载图片跨域

在使用JavaScript的fetch API下载图片时，可能会遇到跨域资源共享（CORS）问题，这是因为出于安全考虑，浏览器限制了从不同源加载资源的能力。如果图片资源的服务器没有设置相应的CORS头部，浏览器默认情况下不允许跨域请求。

以下是解决fetch下载图片跨域问题的一些方法：

1. 使用代理服务器：你可以创建一个中间代理服务器，该服务器向图片资源发出请求并将结果返回给前端。这样，前端实际上是与同源的代理服务器通信，从而绕过了跨域限制。

2. 设置CORS头部：图片资源的服务器端需要添加CORS相关的HTTP响应头，允许特定的域或者所有域访问资源。例如，在服务器响应中添加`Access-Control-Allow-Origin`头部，并指定允许的域（比如`http://example.com`）或者使用通配符`*`允许任何域访问。

3. 使用CORS预检请求：通过添加额外的HTTP方法（如`OPTIONS`）和一些特定的CORS头部（如`Access-Control-Request-Method`），可以向服务器发送一个预检请求。服务器处理这个预检请求并返回相应的CORS头部，之后浏览器才允许实际的请求。

以下是一个简单的fetch请求示例，用于下载图片：

fetch('http://example.com/image.png')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.blob();
  })
  .then(blob => {
    const url = window.URL.createObjectURL(blob);
    const img = document.createElement('img');
    img.style.display = 'none';
    img.src = url;
    document.body.appendChild(img);
    img.onload = function() {
      window.URL.revokeObjectURL(url); // 清理内存
      document.body.removeChild(img);
    };
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });