本地无Web服务器时，如何用JavaScript调用SVG并解决跨域错误？

这个问题我之前也碰到过，核心原因是浏览器的同源策略对file://协议的限制——它不允许这种本地协议下发起跨域请求。下面给你几个实用的解决办法：

方法1：直接内嵌SVG到HTML中 #

把SVG代码直接写在HTML文件里，完全不需要外部请求，从根源上避免跨域问题。这种方式适合小型SVG，维护起来也方便。

示例代码：

<!DOCTYPE html>
<html>
<body>
  <!-- 直接嵌入SVG代码 -->
  <svg width="120" height="120" viewBox="0 0 120 120">
    <rect x="10" y="10" width="100" height="100" fill="#f06" rx="15" />
    <text x="60" y="70" text-anchor="middle" fill="#fff" font-size="24">SVG</text>
  </svg>
</body>
</html>

方法2：使用Data URI引入SVG #

把SVG代码转换成base64格式的Data URI，直接作为img标签的src或者CSS背景图的地址。你可以用在线工具或者本地脚本把SVG转成base64，这样也不需要外部请求。

示例代码：

<!-- 用Data URI作为img的src -->
<img 
  src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgdmlld0JveD0iMCAwIDEyMCAxMjAiPjxyaWNrIHg9IjEwIiB5PSIxMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNmMDYiIHJ4PSIxNSIvPjx0ZXh0IHg9IjYwIiB5PSI3MCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZmlsbD0iI2ZmZiIgZm9udC1zaXplPSIyNCI+U1ZHPC90ZXh0Pjwvc3ZnPg==" 
  alt="Pink rounded square with SVG text"
/>

方法3：启动本地轻量Web服务器（推荐） #

这是最规范的解决方案，不需要修改代码或浏览器设置，只是用http://协议访问本地文件，完全符合浏览器的同源策略。

用Python启动（无需额外安装） #

• 如果你装了Python 3，打开终端/命令行，导航到HTML文件所在目录，运行：

  python -m http.server 8000
  

• 如果你用的是Python 2，运行：

  python -m SimpleHTTPServer 8000
  

然后在浏览器访问 http://localhost:8000/index.html 即可。

用Node.js启动（需安装http-server） #

先全局安装http-server：

npm install -g http-server

然后导航到HTML文件目录，运行：

http-server

终端会给出访问地址，比如 http://localhost:8080，直接访问即可。

方法4：修改浏览器安全设置（临时应急，不推荐） #

这个方法会降低浏览器的安全性，只适合临时测试用：

• Chrome：
  • Windows：右键Chrome快捷方式 → 属性 → 目标栏末尾添加 --allow-file-access-from-files（注意前面有空格），然后重启Chrome。
  • macOS：打开终端，运行 open -a "Google Chrome" --args --allow-file-access-from-files。
  • Linux：运行 google-chrome --allow-file-access-from-files。
• Firefox：在地址栏输入 about:config，找到 security.fileuri.strict_origin_policy，设置为false，重启浏览器。

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