Django DRF接口出现CORS 'Access-Control-Allow-Origin'错误求助

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8000/api/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

我已经尝试了以下修复步骤，但问题仍未解决：

• 已安装django-cors-headers
• 将corsheaders应用添加到INSTALLED_APPS中，位于rest_framework和API应用之前
• 在settings.py的中间件列表顶部添加了CORS中间件
• 配置了CORS_ALLOWED_ORIGINS = ('http://localhost:3000',)（也尝试过设置CORS_ORIGIN_ALLOW_ALL = True）
• 确认API POST请求包含末尾斜杠

我的settings.py配置： #

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders',
    'rest_framework',
    'core.apps.CoreConfig',

]

CORS_ALLOWED_ORIGINS = (
    'http://localhost:3000',  # for localhost (REACT Default)
)


MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'django.middleware.common.CommonMiddleware',
]

React请求代码： #

const postSomeData = async () => {
    const res = await axios.post(
      "http://127.0.0.1:8000/api/",
      { promptQuery: "pls just work already" },
      {
        headers: {
          "Content-Type": "application/json",
        },
      }
    );
  };

用Insomnia发送POST请求能正常工作，但React中不行，请问我遗漏了什么？

排查解决方法： #

1. 删除重复的中间件
   你的MIDDLEWARE列表里重复添加了django.middleware.common.CommonMiddleware，这会打乱中间件执行顺序，导致CORS头无法正确注入。直接移除最后一行的django.middleware.common.CommonMiddleware。

2. 补充Origin匹配项
   浏览器有时会将localhost解析为127.0.0.1，导致请求的Origin与配置不匹配，将两个地址都加入允许列表：

   CORS_ALLOWED_ORIGINS = [
       'http://localhost:3000',
       'http://127.0.0.1:3000',
   ]
   

3. 检查ALLOWED_HOSTS
   确保Django允许接收来自对应域名的请求，添加以下配置：

   ALLOWED_HOSTS = ['127.0.0.1', 'localhost']
   

4. 升级django-cors-headers
   旧版本可能存在配置兼容问题，运行以下命令升级到最新版：

   pip install --upgrade django-cors-headers
   

5. 重启Django服务器
   修改settings.py后必须重启服务器，配置才会生效。

6. 验证请求Origin
   打开浏览器开发者工具的Network面板，查看请求的Origin头值，确保和CORS_ALLOWED_ORIGINS中的地址完全一致（包括协议、域名、端口）。

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