在Vercel部署Django+React项目遭遇CORS跨域错误求助

1. 修复vercel.json的语法错误 #

你的vercel.json中使用了中文双引号，JSON语法要求必须使用英文双引号，这会导致Vercel无法正确解析配置，请求无法正常转发到Django后端，自然不会返回CORS相关响应头。修改后的正确配置如下：

{
  "builds": [
    {
      "src": "backend/wsgi.py",
      "use": "@vercel/python",
      "config": { "maxLambdaSize": "15mb" }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "backend/wsgi.py"
    }
  ]
}

2. 完善Django的CORS配置 #

虽然你已经开启了CORS_ALLOW_ALL_ORIGINS = True，但可以补充以下配置，确保预检请求（OPTIONS）被正确处理：

# settings.py
CORS_ALLOW_METHODS = [
    "DELETE",
    "GET",
    "OPTIONS",
    "PATCH",
    "POST",
    "PUT",
]

CORS_ALLOW_HEADERS = [
    "accept",
    "accept-encoding",
    "authorization",
    "content-type",
    "dnt",
    "origin",
    "user-agent",
    "x-csrftoken",
    "x-requested-with",
]

这些配置覆盖了常见的请求方法和请求头，避免预检请求因权限不足被拦截。

3. 验证Vercel部署状态 #

• 重新部署项目，确保vercel.json的修改被Vercel读取。可以在Vercel控制台查看部署日志，确认build规则和路由配置是否生效。
• 在浏览器开发者工具的Network面板中，查看预检OPTIONS请求的响应头，确认是否存在Access-Control-Allow-Origin字段。如果仍未出现，说明请求未到达Django后端，需要再次检查Vercel路由规则是否匹配。

4. 带凭证请求的额外配置 #

如果你的前端请求需要携带Cookie或认证信息，需在settings.py中添加：

CORS_ALLOW_CREDENTIALS = True

同时确保前端请求中开启withCredentials: true（比如React中使用axios时配置axios.defaults.withCredentials = true）。

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