已配置CORS_ALLOWED_ORIGINS仍遇跨域问题？Django报错排查

第一个错误：Origin匹配失败 #

这个错误本质是Django的CSRF信任源验证未通过，和单纯的CORS跨域控制不是一回事。CORS_ALLOWED_ORIGINS只负责告诉浏览器是否允许跨域请求，但对于POST、PUT这类非安全HTTP方法，Django会额外触发CSRF安全校验，此时必须确保请求源在CSRF_TRUSTED_ORIGINS列表内——哪怕你已经配置了CORS，这两个配置管的是完全不同的安全环节。

注意：配置CSRF_TRUSTED_ORIGINS时要写全协议、域名和端口，比如http://localhost:3000，不能只写localhost或者漏掉端口。

第二个错误：CSRF cookie未设置 #

添加CSRF_TRUSTED_ORIGINS后，CSRF验证进入了下一步，但前端没有正确携带CSRF凭证，所以触发这个错误。解决步骤如下：

• 先检查Django配置：将SESSION_COOKIE_SAMESITE设为Lax（HTTP环境）或None（HTTPS跨域环境），同时SESSION_COOKIE_SECURE要对应设置——HTTPS下设为True，HTTP下设为False；CSRF_COOKIE_SAMESITE和CSRF_COOKIE_SECURE也要做同样对应配置。
• 前端需要从Cookie中提取csrftoken值，然后在请求头里加入X-CSRFToken: [提取到的token]，同时开启请求的withCredentials选项确保携带Cookie。比如用React+axios的示例代码：

  // 提取csrftoken
  function getCookie(name) {
      let cookieValue = null;
      if (document.cookie && document.cookie !== '') {
          const cookies = document.cookie.split(';');
          for (let i = 0; i < cookies.length; i++) {
              const cookie = cookies[i].trim();
              if (cookie.substring(0, name.length + 1) === (name + '=')) {
                  cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                  break;
              }
          }
      }
      return cookieValue;
  }
  const csrftoken = getCookie('csrftoken');
  
  // 发送请求
  axios.post('/get_user', yourData, {
      headers: {
          'X-CSRFToken': csrftoken
      },
      withCredentials: true
  });
  

额外排查点 #

• 可以先把请求改成GET方法（GET默认不触发CSRF验证），确认CORS配置是否真的生效，再回头排查POST类请求的CSRF问题。
• 若使用Django 3.2及以上版本，CSRF_TRUSTED_ORIGINS支持通配符，但建议精确配置，避免不必要的安全风险。

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