Angular+Django部署后CSRF Token无法保存为Cookie问题求助

你的核心问题是部署到PythonAnywhere后，Django返回的CSRF Cookie无法被浏览器存储，导致后续请求失败，本地环境正常说明问题出在部署环境的配置差异上，以下是排查方向和解决方法：

1. 修正CORS与可信源配置 #

部署前端后，必须将CORS_ALLOWED_ORIGINS和CSRF_TRUSTED_ORIGINS替换为前端实际的部署域名，而非本地的localhost:4200。例如前端部署在https://your-frontend-domain.com，配置应改为：

CORS_ALLOWED_ORIGINS = (
    'https://your-frontend-domain.com',
)

CSRF_TRUSTED_ORIGINS = (
    'https://your-frontend-domain.com',
)

注意必须包含完整的协议（http://或https://），域名不能带端口（除非前端确实用非标准端口）。

2. 检查HTTPS与Cookie Secure设置 #

你设置了CSRF_COOKIE_SECURE = True，这要求Cookie只能在HTTPS连接下传输。PythonAnywhere的默认域名（如xxx.pythonanywhere.com）是HTTPS，但如果你的后端用自定义HTTP域名，浏览器会拒绝保存带Secure属性的Cookie。

• 确认后端访问协议是HTTPS，若为HTTP则将CSRF_COOKIE_SECURE改为False（仅测试用，生产环境建议强制HTTPS）。
• 添加反向代理SSL识别配置，PythonAnywhere通过反向代理转发请求，Django需要识别真实的请求协议：

SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')

3. 调整中间件顺序 #

你的CorsMiddleware放在了中间件列表最后，这会导致CORS头无法正确生效。CORS中间件必须放在CommonMiddleware之前，正确顺序如下：

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'corsheaders.middleware.CorsMiddleware',  # 移至此处
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

4. 确保Angular请求携带Credentials #

Angular的HttpClient请求必须显式设置withCredentials: true，否则浏览器不会保存或发送Cookie。你可以在单个请求中设置：

this.http.get('/api/get-csrf-token', { withCredentials: true });

或通过拦截器全局配置，避免每个请求重复设置。

5. 排查浏览器第三方Cookie限制 #

如果前端和后端是不同域名，CSRF Cookie属于第三方Cookie，现代浏览器默认会阻止这类Cookie。解决方法：

• 将前端和后端部署在同域或子域名下，设置CSRF_COOKIE_DOMAIN = '.your-domain.com'（注意开头的点）。
• 临时关闭浏览器的第三方Cookie阻止功能，验证是否是这个原因导致的问题。

调试步骤 #

1. 打开浏览器开发者工具，切换到Application > Cookies，查看是否有CSRF Cookie存在。
2. 在Network标签中，查看返回的Set-Cookie头，确认包含Secure、SameSite=None属性，且域名配置正确。
3. 检查请求的CORS响应头：Access-Control-Allow-Origin应为前端域名，Access-Control-Allow-Credentials应为true。

内容的提问来源于stack exchange，提问作者bp-pet