如何配置Vite服务器CORS以解决图片加载时的跨域错误

开发者阿泽

2026-8-13

Vite/Vue 3 图片加载CORS问题

错误信息

从源'https://my-web-app-url.com'访问'https://website.com/image-url.jpg'的图片已被CORS策略阻止：请求的资源上不存在'Access-Control-Allow-Origin'标头。

相关代码

图片加载函数

const imageLoader = (image: HTMLImageElement, url: string): Promise<HTMLImageElement> => {
  return new Promise((resolve, reject) => {
    image.crossOrigin = "Anonymous";
    image.src = url;
    image.onload = () => resolve(image);
    image.onerror = () => reject(image);
  });
};

Canvas创建函数

const createCanvas = async (url: string): Promise<CanvasObject | null> => {
  const image = new Image();
  const loaded = await imageLoader(image, url);
  const canvas = document.createElement("canvas");
  canvas.setAttribute("visibility", "hidden");
  canvas.width = loaded.width;
  canvas.height = loaded.height;
  const ctx = canvas.getContext("2d");
  if (ctx) {
    ctx.drawImage(image, 0, 0);
    return { ctx, width: image.width, height: image.height };
  } else {
    console.error("context not found");
    return null;
  }
};

已尝试的解决方案

设置图片跨域属性：
image.crossOrigin = "Anonymous"
为URL添加随机查询参数（禁用图片缓存）：
image.src = url + "?" + new Date().getTime()
在vite.config中启用CORS并设置origin为"*"：
```
server: {
  cors: { origin: "*" },
}
```

在vite.config中添加代理规则：

server: {
  proxy: {
    "/": {
      target: "https://image-aware-background.vercel.app",
      changeOrigin: true,
      secure: false,
      rewrite: (path) => path.replace(/^\//, ""),
    },
  },
}

以上方法均未解决CORS错误，原始应用请求中能看到access-control-allow-origin标头，但图片下载请求中不存在该标头。