生产环境下Set-Cookie无法在Vercel React应用中设置Cookie问题

本地开发时，React（搭配Axios）和Django REST Framework后端交互完全正常，csrftoken和sessionid Cookie能正常设置；生产环境用Postman调用API也能成功拿到并设置这两个Cookie，但把React应用部署到Vercel后，明明请求返回成功，浏览器就是存不下这两个Cookie。

Django settings.py 配置 #

CORS_ALLOWED_ORIGINS = [
    'http://localhost:3000',
    'http://127.0.0.1:3000',
    # 生产环境Web客户端URL
]

CORS_ORIGIN_WHITELIST = (
    'http://localhost:3000', 
    'http://127.0.0.1:3000',
    # 生产环境Web客户端URL
)

CSRF_TRUSTED_ORIGINS = [
    'http://localhost:3000', 
    'http://localhost:8000', 
    'http://127.0.0.1:3000',
    # 生产环境Web客户端URL
]

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",
]

CORS_EXPOSE_HEADERS = [
  "Content-Type", 
  "X-CSRFToken"
]

CORS_ALLOW_CREDENTIALS = True

CSRF_COOKIE_NAME = "csrftoken"

CSRF_COOKIE_HTTPONLY = False
CSRF_COOKIE_SECURE = True
CSRF_COOKIE_SAMESITE = 'None'

SESSION_COOKIE_HTTPONLY = False
SESSION_COOKIE_SECURE = True
SESSION_COOKIE_SAMESITE = 'None'

Axios 客户端配置 #

axios.defaults.withCredentials = true;

const axiosClient = axios.create({
  xsrfHeaderName: 'X-CSRFToken',
  xsrfCookieName: 'csrftoken',
  headers: {
    "Accept": "application/json",
    "Content-Type": "application/json",
  },
});

axiosClient.defaults.baseURL = process.env.NODE_ENV === 'production'
  ? apiUrls.PROD_ROOT
  : apiUrls.DEV_ROOT;

export default axiosClient;

Vercel应用中的响应情况 #

响应头包含csrftoken和sessionid的Set-Cookie字段，但浏览器未将其存入Cookie列表。

1. 核对Django的生产域名配置 #

• 把Vercel应用的完整HTTPS域名（比如https://your-app.vercel.app）加到CORS_ALLOWED_ORIGINS、CORS_ORIGIN_WHITELIST、CSRF_TRUSTED_ORIGINS中，必须使用HTTPS——因为你开启了SECURE=True，浏览器仅在HTTPS环境下接受这类Cookie。
• 同时确保后端API也是HTTPS协议，否则SECURE Cookie无法被正常传递。

2. 检查Cookie的Domain设置 #

如果后端和前端为不同域名（比如后端是api.yourdomain.com，前端是your-app.vercel.app），需在Django的settings.py中显式配置Cookie的Domain：

CSRF_COOKIE_DOMAIN = ".yourdomain.com"  # 用根域名适配所有子域名
SESSION_COOKIE_DOMAIN = ".yourdomain.com"

若为完全跨域（域名无关联），则无需设置Domain，只要保证SAMESITE='None'和SECURE=True同时启用即可。

3. 检查Vercel的跨域配置 #

查看Vercel项目的vercel.json，避免冲突配置导致Axios的withCredentials失效：

{
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Credentials", "value": "true" },
        { "key": "Access-Control-Allow-Origin", "value": "https://your-app.vercel.app" },
        { "key": "Access-Control-Allow-Methods", "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT" },
        { "key": "Access-Control-Allow-Headers", "value": "X-CSRFToken,Content-Type,Authorization" }
      ]
    }
  ]
}

注意：Access-Control-Allow-Origin不能设为*，必须填写Vercel应用的具体域名，否则带Cookie的请求会被浏览器拦截。

4. 排查浏览器的Cookie限制 #

• 确认浏览器未禁用第三方Cookie（Chrome等浏览器默认在部分场景下会拦截跨域Cookie，尤其是SAMESITE=None的情况），可临时开启第三方Cookie进行测试。
• 打开浏览器控制台的Application -> Cookies面板，查看是否有Cookie被标记为“阻止”，鼠标悬停可查看具体拦截原因。

5. 确认Axios配置有效性 #

• 确保withCredentials已启用，可全局设置或在实例创建时直接配置：

const axiosClient = axios.create({
  withCredentials: true,
  xsrfHeaderName: 'X-CSRFToken',
  xsrfCookieName: 'csrftoken',
  headers: {
    "Accept": "application/json",
    "Content-Type": "application/json",
  },
});

内容的提问来源于stack exchange，提问作者while-loops