Django后端如何获取来自不同React前端子域的请求发起源子域名

问题根源 #

你调用self.request.get_host()获取到的永远是backend的原因是：该方法读取的是HTTP请求的Host头，而浏览器发起跨子域名API请求时，Host头的值是请求目标（也就是后端服务backend.example.com）的域名，而非发起请求的前端域名。

可行解决方案 #

方案1：读取Origin请求头（推荐，无需前端修改） #

浏览器发起跨域请求时，会自动携带Origin头，值为发起请求的前端页面完整源地址（比如https://first.example.com），直接解析该头即可拿到子域名标识。

Django视图代码示例

# 合法子域名白名单，避免恶意请求伪造头
ALLOWED_SUBDOMAINS = {"first", "second", "third"}

def get_request_subdomain(request):
    origin = request.META.get("HTTP_ORIGIN", "")
    if not origin:
        return None
    # 剥离协议前缀，提取域名部分
    domain = origin.replace("https://", "").replace("http://", "").split("/")[0]
    subdomain = domain.split(".")[0]
    return subdomain if subdomain in ALLOWED_SUBDOMAINS else None

# 视图中调用
subdomain = get_request_subdomain(self.request)

配套配置要求

1. Django CORS配置中将所有前端子域名加入白名单：

# settings.py
CORS_ALLOWED_ORIGINS = [
    "https://first.example.com",
    "https://second.example.com",
    "https://third.example.com",
]

2. 确保Nginx转发配置未屏蔽Origin头，Nginx location块参考配置如下：

location / {
    proxy_pass http://127.0.0.1:8000; # 替换为你的Gunicorn监听地址
    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;
}

方案2：前端主动携带自定义头（最稳定，不受浏览器隐私策略影响） #

如果存在部分特殊请求无Origin头的场景，可以让前端在请求拦截器中统一注入自定义头标识子域名：

React前端代码示例（以Axios为例）

// Axios全局请求拦截器
axios.interceptors.request.use(config => {
    // 提取当前页面子域名
    const subdomain = window.location.host.split('.')[0]
    config.headers['X-Request-Subdomain'] = subdomain
    return config
})

Django视图读取代码

subdomain = self.request.META.get("HTTP_X_REQUEST_SUBDOMAIN", "")

方案3：读取Referer头（备选） #

如果前两个方案都无法使用，可以读取Referer头作为备选，该头可能会被用户浏览器隐私设置禁用，准确率低于前两个方案：

referer = self.request.META.get("HTTP_REFERER", "")
if referer:
    domain = referer.replace("https://", "").replace("http://", "").split("/")[0]
    subdomain = domain.split(".")[0]

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