Mac系统下Django Rest Auth的JWT Cookie无法保存问题排查

环境与配置 #

使用技术栈：Django Rest Framework 3.14.0、dj-rest-auth 5.0.2、simplejwt 5.3.1、django-cors-headers 4.3.1；API部署在Heroku，前端为React 18.2.0 + Axios 0.27.2；测试环境为Mac M2（Sonoma 14.2.1）。

INSTALLED_APPS配置 #

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'cloudinary_storage',
    'django.contrib.staticfiles',
    'cloudinary',

    # Django REST Framework
    'rest_framework',
    'rest_framework.authtoken',  # Django REST Framework Token Authentication
    'dj_rest_auth',
    # Registration
    'django.contrib.sites', 
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    'dj_rest_auth.registration',
    # CORS
    'corsheaders',

    # Apps
    'profiles',
    'places',
    'posts',
    'likes',

]

MIDDLEWARE配置 #

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'allauth.account.middleware.AccountMiddleware',
    # ... custom middleware ...
    'middleware.dj_rest_auth_logging.LogResponseMiddleware',
]

Cookie与CORS配置 #

REST_AUTH = {
    'USE_JWT': True,
    'JWT_AUTH_SECURE': True,
    'JWT_AUTH_COOKIE': 'positive-auth',
    'JWT_AUTH_REFRESH_COOKIE': 'positive-refresh-token',
    # When this flag is set to false, the refresh token will be sent in the body
    # Unless, it will be only in a cookie
    'JWT_AUTH_HTTPONLY': False,
    'JWT_AUTH_SAMESITE': 'None',
    # 'JWT_AUTH_COOKIE_DOMAIN' : ".herokuapp.com",
}

CORS_ALLOW_CREDENTIALS = True

Axios配置 #

import axios from "axios";

axios.defaults.baseURL = "https://my-app.herokuapp.com";

axios.defaults.headers.post["Content-Type"] = "multipart/form-data";
axios.defaults.withCredentials = true;

export const axiosReq = axios.create();
export const axiosRes = axios.create();

问题现象 #

• Postman中可正常看到Cookie
• Mac上Chrome、Edge浏览器无法看到Set-Cookie响应头，仅在响应体中返回Token
• Mac上Firefox可看到Set-Cookie响应头，但无法保存Cookie
• Windows Azure虚拟机中所有浏览器均正常工作
• 尝试设置JWT_AUTH_COOKIE_DOMAIN为.herokuapp.com时，系统提示域名不正确

疑问 #

1. 如何让Mac系统下的浏览器正常保存Cookie？
2. API的settings.py配置是否存在错误，还是需要在Mac本地做特殊设置？
3. 若问题出在Mac端，具体原因是什么，普通用户该如何正常使用Web应用？

问题排查与解决方案 #

1. 修正API端核心配置 #

• 调整JWT_AUTH_HTTPONLY设置：当前将JWT_AUTH_HTTPONLY设为False，这会让Cookie暴露给前端JS，触发部分浏览器的跨域安全策略。安全做法是设置为True，让浏览器仅在HTTP请求中自动携带Cookie，禁止JS访问：

  'JWT_AUTH_HTTPONLY': True,
  

• 完善CORS域名白名单：仅开启CORS_ALLOW_CREDENTIALS不够，需明确指定允许的前端域名，避免全局开放带来的风险：

  CORS_ALLOWED_ORIGINS = [
      "https://your-react-app-domain.com",  # 替换为实际前端域名
      # 开发环境可添加："http://localhost:3000",
  ]
  

• 修正Cookie域名配置：Heroku的二级域名不需要前缀点，直接设置为你的API域名即可：

  'JWT_AUTH_COOKIE_DOMAIN': "my-app.herokuapp.com",
  

2. Mac端浏览器的临时调试方案 #

• Chrome/Edge隐私设置调整：Mac端Chrome/Edge默认开启"增强型隐私保护"，会拦截跨域第三方Cookie。可临时关闭测试：进入浏览器设置→隐私和安全→隐私沙盒和增强型隐私保护→关闭该功能。但这只是调试用，核心还是要修正API配置。
• Firefox Cookie策略适配：确保API和前端均使用HTTPS（Heroku默认满足），同时SameSite=None必须配合Secure=True（你已正确设置），前端Axios的withCredentials保持true即可。

3. 普通用户使用指引 #

普通Mac用户无需修改系统设置，只要API端配置正确，浏览器会自动保存Cookie。若遇异常，可尝试：

• 更新浏览器到最新版本
• 清除浏览器缓存与旧Cookie
• 关闭隐私类浏览器插件（如AdBlocker、Privacy Badger）

总结 #

核心问题是API的JWT_AUTH_HTTPONLY配置错误，加上Cookie域名设置不当，触发了Mac端浏览器的安全拦截策略。修正API配置后，Mac端浏览器即可正常保存Cookie，无需用户做系统级修改。

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