本地跨域调用Django接口：React发Axios请求遭401权限拒绝

1. 完善Django的CORS配置 #

现有配置已添加允许的源和头部，但需补充以下关键项：

• 确保corsheaders中间件已启用，在settings.py的MIDDLEWARE中添加（注意顺序，要放在CommonMiddleware之前）：

  MIDDLEWARE = [
      # 其他中间项...
      'corsheaders.middleware.CorsMiddleware',
      'django.middleware.common.CommonMiddleware',
      # 其他中间项...
  ]
  

• 若请求需携带凭证（如Authorization头），添加配置允许凭证传递：

  CORS_ALLOW_CREDENTIALS = True
  

• 再次确认CORS_ALLOW_HEADERS中包含小写的authorization，你的配置已满足此要求，无需修改。

2. 验证Token有效性与格式 #

• 用curl或Postman直接调用后端接口，携带相同Bearer token，排查是否为token本身问题：

  curl -H "Authorization: Bearer YOUR_ACTUAL_TOKEN" http://localhost:8000/path/to/data/
  

  若此请求也返回401，说明token过期、权限不足或生成错误，与跨域无关，需先修复token问题。
• 检查前端代码中token的取值逻辑，确保${'here is my token'}已替换为实际有效token，无多余空格或引号。

3. 调整Axios请求配置 #

• 若开启了CORS_ALLOW_CREDENTIALS，需在Axios请求中添加withCredentials: true：

  axios
      .get(`http://localhost:8000/path/to/data/`, {
          headers: {
              'Content-type': 'application/json',
              Accept: 'application/json',
              Authorization: `Bearer ${yourActualToken}`,
          },
          withCredentials: true,
      })
      .then((response) => {
          console.log(response);
      })
      .catch((error) => {
          console.log(error);
      });
  

• 在Chrome开发者工具的Network标签中，查看请求的Request Headers，确认Authorization头已正确发送，未被浏览器拦截。

4. 使用React代理绕过跨域（推荐方案） #

本地开发时，通过React代理转发请求，彻底避免跨域问题：

• 在React项目的package.json中添加代理配置：

  "proxy": "http://localhost:8000"
  

• 修改Axios请求URL，去掉域名部分：

  axios
      .get(`/path/to/data/`, {
          headers: {
              'Content-type': 'application/json',
              Accept: 'application/json',
              Authorization: `Bearer ${yourActualToken}`,
          },
      })
  

  此时React开发服务器会自动将请求转发到Django后端，不存在跨域问题，生产环境的CORS配置不受影响。

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