Vite开发服务器中使用<use>元素加载外部SVG失败问题

1. 浏览器对<use>元素的同源策略限制更严格：<use>需要读取SVG内部的DOM结构（比如目标#ico-foodbank对应的元素），属于跨源资源共享（CORS）的校验范畴；而<img>仅渲染图片，不涉及读取内部结构，因此浏览器对其限制更宽松。
2. Vite开发服务器默认配置下，返回SVG文件时未添加符合要求的CORS响应头，导致浏览器阻止了<use>的加载请求——即使是本地开发的同源地址也会触发这个限制。生产环境中资源部署在同一域名下，不存在跨域校验，因此可以正常加载。

方法1：配置Vite开发服务器添加CORS响应头 #

在vite.config.js中修改服务器配置，为SVG文件添加允许跨域的响应头：

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
      'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization'
    }
  }
})

重启开发服务器后，<use>即可正常发起请求并加载SVG内容。

方法2：使用Vite SVG插件内联处理SVG #

使用vite-plugin-svg-icons插件将SVG图标统一注册为内联资源，避免外部引用的跨域问题：

1. 安装插件：

npm install vite-plugin-svg-icons -D

2. 在vite.config.js中配置插件：

import { defineConfig } from 'vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

export default defineConfig({
  plugins: [
    createSvgIconsPlugin({
      // 指定SVG图标存放目录
      iconDirs: [path.resolve(process.cwd(), 'resources/img/svg/icons')],
      // 指定symbol的id前缀
      symbolId: 'ico-[name]'
    })
  ]
})

3. 在项目入口文件（如main.js）中导入注册脚本：

import 'virtual:svg-icons-register'

4. 在页面中使用<use>引用：

<svg>
  <use xlink:href="#ico-foodbank"></use>
</svg>

这种方式在开发和生产环境都能正常工作，还能减少HTTP请求。

方法3：内联SVG到页面的<defs>中 #

将目标SVG的内容直接内联到HTML的<defs>标签里，再用<use>引用：

<svg style="display: none;">
  <defs>
    <!-- 这里放入ico-foodbank.svg的完整内容 -->
    <symbol id="ico-foodbank" viewBox="0 0 24 24">
      <!-- SVG路径内容 -->
    </symbol>
  </defs>
</svg>

<!-- 页面中使用 -->
<svg>
  <use href="#ico-foodbank"></use>
</svg>

这种方式完全避免了外部资源加载，适合少量图标的场景。

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