React（NX+Vercel）项目中如何让stellar.toml直接展示而非下载

我用NX构建React应用并部署到Vercel，已经生成了包含stellar.toml文件的.well-known文件夹，并且在index.html中做了如下引用：

<!DOCTYPE html>
<html
    lang="en"
    className="h-full">
    <head>
        ...

        <meta
            name="viewport"
            content="width=device-width, initial-scale=1" />
        <link
            rel="stellar.toml file"
            href="%PUBLIC_URL%/.well-known/stellar.toml" />

        ...

    </head>
    <body className="h-full">
        <div id="root"></div>
    </body>
</html>

部署成功后，访问{domain}/.well-known/stellar.toml时，浏览器总是触发下载提示，而不是在标签页直接展示文件。我同时使用了react-router，请问有没有办法实现文件直接展示而非下载？

1. 配置Vercel的MIME类型（核心解决方法） #

浏览器触发下载是因为Vercel默认给.toml文件设置的Content-Type会被识别为可下载资源，你需要在项目根目录创建vercel.json文件，指定该文件的Content-Type为文本类型：

{
  "headers": [
    {
      "source": "/.well-known/stellar.toml",
      "headers": [
        {
          "key": "Content-Type",
          "value": "text/plain; charset=utf-8"
        }
      ]
    }
  ]
}

这个配置会让Vercel在返回stellar.toml文件时，告诉浏览器这是纯文本内容，从而直接在标签页展示。

2. 确保react-router不拦截静态文件请求 #

react-router的前端路由规则可能会尝试接管所有路径请求，但Vercel默认会优先处理项目根目录下的静态文件（包括.well-known文件夹），所以一般不需要额外调整。如果遇到路由拦截的情况，可以在路由配置中添加排除规则：

import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Routes>
      {/* 你的其他业务路由 */}
      <Route 
        path="/.well-known/*" 
        element={null} // 让浏览器直接请求服务器资源，不触发前端路由
      />
    </Routes>
  );
}

3. 修正index.html中的link标签（规范优化） #

按照Stellar的官方规范，link标签的rel属性应该设置为"stellar.toml"，而非"stellar.toml file"，虽然这不会直接影响文件展示，但建议修正以符合规范：

<link rel="stellar.toml" href="%PUBLIC_URL%/.well-known/stellar.toml" />

内容的提问来源于stack exchange，提问作者Lukas Luke Stateczny