Django后端无法接收前端GET请求 触发CORS跨域拦截报错

• CORS是浏览器独有的同源安全限制，仅在浏览器环境发起请求时生效，接口测试工具、直接输入地址访问都不会触发CORS校验，这就是Postman/Insomnia能正常拿到响应、前端页面调用报错的核心原因。
• 你只在settings.py里写了CORS相关配置项，但没有安装django-cors-headers依赖，也没有将其注册到应用列表和中间件中：Django原生不识别这两个配置项，配置自然不会生效。
• 你混淆了请求头和响应头：Access-Control-Allow-Origin、Access-Control-Allow-Methods是后端返回给浏览器的响应头，不是前端发起请求时需要携带的头。你在axios请求配置中强行加这两个头，反而会触发浏览器的OPTIONS预检请求，而后端没有正确处理预检逻辑，直接导致跨域拦截。
• @csrf_exempt仅用于跳过Django的CSRF令牌校验，和CORS跨域问题没有任何关联，无法解决跨域报错。另外你看到的app.use(cors)是Node.js Express框架的后端跨域方案，和React前端、Django后端无关，不需要在React代码中找对应方法。

后端Django配置修复 #

1. 安装CORS处理依赖

pip install django-cors-headers

2. 修改settings.py配置

• 首先将corsheaders加入已安装应用列表，放在业务应用之前即可：

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "corsheaders", # 新增这行
    # 你的自定义业务app
]

• 注册CORS中间件，注意顺序必须放在CommonMiddleware、CsrfViewMiddleware之前，否则无法正常拦截请求处理跨域头：

MIDDLEWARE = [
    "django.middleware.security.SecurityMiddleware",
    "django.contrib.sessions.middleware.SessionMiddleware",
    "corsheaders.middleware.CorsMiddleware", # 新增这行，注意位置
    "django.middleware.common.CommonMiddleware",
    "django.middleware.csrf.CsrfViewMiddleware",
    "django.contrib.auth.middleware.AuthenticationMiddleware",
    "django.contrib.messages.middleware.MessageMiddleware",
    "django.middleware.clickjacking.XFrameOptionsMiddleware",
]

• 补全CORS规则配置，你之前写的无效配置CORS_ORIGIN_ALLOW = True可以直接删掉：

# 允许所有来源跨域访问，开发环境可用，生产环境建议配置具体的前端域名白名单
CORS_ORIGIN_ALLOW_ALL = True
# 允许所有请求头
CORS_ALLOW_HEADERS = "*"
# 允许所有HTTP请求方法，包含OPTIONS预检请求
CORS_ALLOW_METHODS = ["GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"]

3. 重启Django开发服务器，配置修改后必须重启才能生效。你现有views.py中的代码不需要改动，cors中间件会自动处理OPTIONS预检请求，@csrf_exempt装饰器可根据自身CSRF需求保留。

前端React代码修复 #

1. 删除axios请求中错误添加的CORS相关请求头，这些头由后端返回，前端不需要携带。另外注意axios响应对象的实际数据存在data字段中，直接赋值响应对象会拿不到业务数据：

const axiomCall = async () => {
  console.log("FF");
  // 移除错误的headers配置
  const temp = await axios.get("http://127.0.0.1:8000/cluster/")
  // 取响应的data字段赋值
  setRow(temp.data)
};

2. （可选开发环境优化）可以在React项目的package.json中新增代理配置，避免每次写全后端地址，同时开发环境不会触发跨域问题：

{
  // 其他原有配置
  "proxy": "http://127.0.0.1:8000"
}

配置后请求可以直接简写为axios.get("/cluster/")，开发服务器会自动把请求转发到Django后端，不需要额外处理跨域。注意该配置仅在开发环境生效，生产环境仍需依赖后端的CORS配置。

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