跨域表单提交报错：Origin checking failed - null不匹配可信源

为什么会出现origin:null？ #

传统HTML表单直接跨域提交时，浏览器不会发送Origin请求头，Django的CSRF中间件无法识别合法的请求来源，因此将请求的origin判定为null，触发Origin checking failed错误。而cors-headers主要处理AJAX（XMLHttpRequest/Fetch）类型的跨域请求，对传统表单提交的场景不生效，所以你配置了也没用。

另外，你的后端代码还有个问题：文件上传的数据不在request.POST里，应该从request.FILES中获取，当前的data.get("filename")拿不到上传的文件。

解决方案 #

方案一：改用AJAX提交表单（推荐） #

通过JavaScript监听表单提交事件，用FormData发送请求，同时正确配置跨域和CSRF验证：

1. 前端修改表单代码（添加id方便监听）：

<form id="uploadForm" action="http://localhost:4000/print" method="POST">
    {% csrf_token %}
    <input type="file" id="myFile" name="filename">
    <input type="submit">
</form>

<script>
document.getElementById('uploadForm').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止表单默认提交行为
    const formData = new FormData(this);
    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;

    fetch('http://localhost:4000/print', {
        method: 'POST',
        headers: {
            'X-CSRFToken': csrfToken
        },
        body: formData
    })
    .then(response => response.text())
    .then(data => {
        // 处理成功响应，比如跳转到成功页面
        window.location.href = 'http://localhost:4000/print_success';
    })
    .catch(error => console.error('Error:', error));
});
</script>

2. 后端Django配置（确保cors-headers正确设置）：
   在settings.py中添加：

# 安装corsheaders后添加中间件
MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

# 允许的跨域源
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]

# 信任的CSRF源
CSRF_TRUSTED_ORIGINS = [
    "http://localhost:3000",
]

# 允许携带Cookie（如果需要）
CORS_ALLOW_CREDENTIALS = True

3. 修正后端views.py的文件获取逻辑：

if request.method == "POST":
    file = request.FILES.get("filename")
    # 处理文件，比如保存到服务器
    # if file:
    #     with open(file.name, 'wb+') as destination:
    #         for chunk in file.chunks():
    #             destination.write(chunk)
    return render(request, "print_success.html", {"form": file})

方案二：临时允许null origin（仅本地测试用，禁止生产环境） #

在settings.py中添加：

CSRF_TRUSTED_ORIGINS = ['null']

这种方式会降低安全性，只适合本地临时测试，线上绝对不能用。

方案三：避免跨域（推荐生产环境） #

通过反向代理（比如Nginx）将两个服务映射到同一域名下，比如：

• 访问http://localhost/时转发到3000端口
• 访问http://localhost/api/时转发到4000端口

这样表单提交的地址改为/api/print，就不存在跨域问题了，也不需要配置cors-headers。

内容的提问来源于stack exchange，提问作者Việt Anh