Vercel部署后端代码遇404及CSP脚本加载错误，求解决方案

一、修复404状态码问题 #

• 核对Vercel部署配置：确保后端入口文件（如index.js、server.js或api目录）符合Vercel规则。如果是Node.js项目，可通过vercel.json明确配置：

  {
    "buildCommand": "npm run build",
    "devCommand": "npm run dev",
    "functions": {
      "api/*.js": {
        "runtime": "@vercel/node@20"
      }
    }
  }
  

• 检查路由映射：确认后端自定义路由无拼写错误，比如Express框架下所有路由都已正确注册。
• 查看Vercel部署日志：在控制台部署详情中排查是否存在构建失败、依赖缺失等导致服务无法启动的问题。

二、解决Content Security Policy（CSP）错误 #

错误提示default-src 'none'意味着默认禁止所有资源加载，且未设置script-src-elem，因此触发脚本加载拦截。解决方式：

• 后端响应头配置：以Express为例，在服务器代码中添加CSP规则，允许指定脚本源：

  app.use((req, res, next) => {
    res.setHeader(
      "Content-Security-Policy",
      "default-src 'self'; script-src-elem 'self' https://conoret.com;"
    );
    next();
  });
  

  可根据实际需求补充其他资源规则（如样式、图片的允许源）。
• 静态页面meta标签配置：若为静态页面，可直接在HTML头部添加：

  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src-elem 'self' https://conoret.com;">
  

• 注意：若Vercel自动注入了分析类脚本，需将对应源加入CSP允许列表。

三、验证服务器端数据获取 #

• 直接访问后端接口URL，确认是否返回预期数据。
• 前端调用时检查请求URL是否正确（包含Vercel部署域名、路由路径无误）。
• 查看浏览器控制台网络请求，确认状态码与响应内容，排除前端请求拼写错误或跨域问题。

内容的提问来源于stack exchange，提问作者Rabiul Alam Sohel