Svelte中POST请求获取SVG并渲染遇跨域问题求助

1. 处理跨域（CORS）错误 #

控制台提示的错误是浏览器同源策略导致的——前端运行在localhost:5173，后端在localhost:8080，属于不同端口被视为不同源，必须在后端配置允许跨域请求：

• 若后端是Node.js/Express：安装cors中间件，配置允许指定源访问

  const cors = require('cors');
  app.use(cors({ origin: 'http://localhost:5173' }));
  

• 若后端是Spring Boot：在接口方法上添加@CrossOrigin(origins = "http://localhost:5173")，或配置全局CORS规则
• 其他后端框架同理，核心是让后端响应头包含Access-Control-Allow-Origin: http://localhost:5173

2. 正确渲染SVG内容 #

当前代码仅把SVG文本显示在<pre>标签中，要让浏览器渲染成图形，有两种可行方式：

方式一：直接插入HTML内容 #

使用Svelte的{@html}指令将SVG文本作为HTML插入页面：

<p>Result:</p>
{#if result}
  <div>{@html result}</div>
{/if}

⚠️ 注意：仅当后端返回的SVG内容完全可信时使用，避免XSS攻击风险。

方式二：通过Blob URL渲染（更安全） #

修改doPost函数，将响应转为Blob并生成URL：

async function doPost() {
    const res = await fetch('http://localhost:8080/build', {
        method: 'POST',
        headers: { 
            Accept: 'image/svg+xml',
            'Content-Type': 'application/json' // 建议添加，明确告知后端请求体格式
        },
        body: JSON.stringify({
            formula: foo
        })
    });

    const blob = await res.blob();
    result = URL.createObjectURL(blob);
}

页面中用<img>标签加载该URL：

{#if result}
  <img src={result} alt="Generated SVG" />
{/if}

这种方式能限制SVG中脚本的执行，安全性更高。

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