如何在自定义HTTPS域名服务器上同时运行Django REST API与React应用

一、最优方案：让Django API也走HTTPS #

你的域名已经通过CloudFlare做了HTTPS代理，让API对外暴露HTTPS是最彻底的解决办法，既能满足Secure cookie的要求，也能解决跨协议/跨域问题，步骤如下：

• 配置CloudFlare转发HTTPS请求到VM的8000端口
  登录CloudFlare域名管理后台，先确保域名已指向谷歌云VM的IP（A/CNAME记录）。然后进入规则 -> 页面规则，新建规则：当访问https://你的域名.com/api/*（根据实际API路径调整）时，设置为「转发URL」，目标地址填http://你的VM内网IP:8000/*，转发模式选临时或永久重定向均可。CloudFlare会自动将外部HTTPS请求转换成内部HTTP请求发给API，浏览器端看到的API是HTTPS的，完全符合Secure cookie要求。

• 调整Django的CSRF配置
  在settings.py里更新这些配置：

  CSRF_COOKIE_SAMESITE = 'None'
  CSRF_COOKIE_SECURE = True
  SESSION_COOKIE_SECURE = True
  CSRF_TRUSTED_ORIGINS = ['https://你的域名.com']  # 替换成实际域名
  

  这样CSRF cookie会被标记为Secure和SameSite=None，浏览器能正常存储，同时Django会信任来自你HTTPS域名的请求。

• 修改React的API请求地址
  React里所有调用API的地方，都改成https://你的域名.com/api/xxx（对应CloudFlare转发路径），并且在POST/PUT等修改类请求里带上CSRF token：

  • 可以用document.cookie解析出csrftoken，或者用js-cookie库简化操作
  • 请求头里添加X-CSRFToken: 解析出的token

二、备选方案：用Nginx做反向代理统一入口 #

如果不想依赖CloudFlare的页面规则，也可以在VM上安装Nginx做反向代理，把HTTPS请求分别转发给React和Django：

• 安装并配置Nginx
  配置文件示例（路径一般为/etc/nginx/sites-available/你的域名.conf）：

  server {
      listen 443 ssl;
      server_name 你的域名.com;
  
      # SSL证书可用CloudFlare的Origin CA证书（免费），或者Let's Encrypt
      ssl_certificate /path/to/cert.pem;
      ssl_certificate_key /path/to/key.pem;
  
      # 处理React静态文件
      location / {
          root /var/www/react-build;  # 替换为你的React构建产物路径
          try_files $uri $uri/ /index.html;
      }
  
      # 转发API请求到Django的8000端口
      location /api/ {
          proxy_pass http://localhost:8000/;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto $scheme;  # 告诉Django当前是HTTPS请求
      }
  }
  
  # 把所有HTTP请求重定向到HTTPS
  server {
      listen 80;
      server_name 你的域名.com;
      return 301 https://$host$request_uri;
  }
  

  配置完成后启用站点，重启Nginx。这样所有请求都走443端口的HTTPS，React和API在同一个域名下，跨域问题直接消失，CSRF cookie也能正常设置。

• 更新Django配置
  在settings.py里添加这些配置：

  CSRF_COOKIE_SECURE = True
  SESSION_COOKIE_SECURE = True
  SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')  # 让Django识别反向代理的HTTPS请求
  CSRF_TRUSTED_ORIGINS = ['https://你的域名.com']
  

  因为现在React和API同域，甚至可以把CSRF_COOKIE_SAMESITE设为'Lax'，比None更安全。

三、不推荐的方案 #

别想着直接开放8000端口的HTTP，再把CSRF_COOKIE_SECURE设为False：

• 现代浏览器在HTTPS页面里发起HTTP请求会被判定为混合内容，要么直接阻止请求，要么禁止设置cookie，根本解决不了问题。
• HTTP传输明文数据，生产环境这么做完全是安全隐患。

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