Vercel部署MERN全栈应用遇CSP及API请求URL未定义问题

一、字体加载被CSP阻止（Refused to load the font... default-src 'none'） #

该错误源于Content Security Policy（内容安全策略）配置过于严格，禁止了字体资源的加载，可通过以下两种方式修复：

方法1：在前端HTML中添加CSP meta标签 #

在public/index.html的<head>标签内插入以下配置，根据字体实际来源调整规则：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' data: https://your-frontend-domain.vercel.app;">

• font-src指定允许加载字体的来源，data:支持base64内嵌字体；若字体来自第三方CDN，需补充对应域名。

方法2：通过Vercel配置文件设置CSP头 #

在前端项目根目录创建vercel.json文件，添加HTTP头配置：

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Content-Security-Policy",
          "value": "default-src 'self'; font-src 'self' data:;"
        }
      ]
    }
  ]
}

提交文件后重新部署，Vercel会自动应用该CSP规则。

二、接口URL出现undefined（${backendUrl}/auth/login） #

此问题因环境变量未正确加载导致，按以下步骤排查修复：

1. 本地环境变量命名规范
   若使用Create React App构建前端，环境变量必须以REACT_APP_为前缀，示例：

   REACT_APP_BACKEND_URL=https://your-backend-deployment.vercel.app
   

   代码中需通过process.env.REACT_APP_BACKEND_URL引用，而非自定义的backendUrl（除非已将其赋值为该变量）。

2. Vercel平台配置环境变量
   进入前端项目的「Settings」->「Environment Variables」，添加与本地一致的变量：

   • 变量名：REACT_APP_BACKEND_URL
   • 变量值：你的后端Vercel部署域名
     保存后重新部署项目——Vercel仅在构建阶段注入环境变量，修改后需重新构建生效。

3. 排查变量加载情况
   在代码中添加调试语句，验证变量是否正确加载：

   console.log('Backend URL:', process.env.REACT_APP_BACKEND_URL);
   

   部署后查看浏览器控制台，若输出undefined，检查：

   • Vercel中环境变量名称与代码是否完全一致（区分大小写）
   • 本地.env文件是否已加入.gitignore（避免提交仓库导致覆盖）
   • 若使用Vite等其他框架，环境变量前缀需改为VITE_

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