已正确配置settings.py仍出现Access-Control-Allow-Origin问题？

问题描述 #

已在settings.py中设置CORS_ALLOWED_ORIGINS = ['http://localhost:8080']，但前端从http://localhost:8080访问http://127.0.0.1:8000/engine时，出现以下CORS错误：

Access to XMLHttpRequest at 'http://127.0.0.1:8000/engine' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

项目相关代码如下：

项目代码 #

models.py #

from django.db import models
from django.utils import timezone
import datetime

class Engine(models.Model):
    date = models.DateField(default=datetime.datetime(2024,1,1))

serializers.py #

from rest_framework import serializers

from .models import Engine

class EngineSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = Engine
        fields = ('id', 'date')

views.py #

from django.shortcuts import render

from .models import Engine
from .serializers import EngineSerializer

from rest_framework import viewsets
from rest_framework.authentication import BasicAuthentication
from rest_framework.permissions import IsAuthenticated

class EngineViewSet(viewsets.ModelViewSet):
    authentication_classes = (BasicAuthentication,)
    permission_classes = (IsAuthenticated,)
    queryset = Engine.objects.all()
    serializer_class = EngineSerializer

urls.py #

from django.contrib import admin
from django.urls import path, include

from backend_app.views import EngineViewSet

from rest_framework import routers

router = routers.DefaultRouter()
router.register('engine', EngineViewSet)

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include(router.urls))
]

问题原因与解决方法 #

1. 未完成django-cors-headers的完整配置 #

首先确认已安装依赖：

pip install django-cors-headers

然后在settings.py中补充以下配置：

• 将corsheaders加入INSTALLED_APPS：

INSTALLED_APPS = [
    # 其他已有应用
    'corsheaders',
]

• 将CorsMiddleware加入MIDDLEWARE（需放在CommonMiddleware之前）：

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

2. 源地址匹配问题 #

浏览器会将localhost和127.0.0.1视为不同源，需确保CORS_ALLOWED_ORIGINS包含前端实际的请求源，或者添加本地测试常用源：

CORS_ALLOWED_ORIGINS = [
    "http://localhost:8080",
    "http://127.0.0.1:8080",
]

测试环境可临时允许所有源（生产环境禁用）：

CORS_ALLOW_ALL_ORIGINS = True

3. 认证头权限配置 #

视图使用了BasicAuthentication，需确保CORS允许认证头：

CORS_ALLOW_HEADERS = [
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'origin',
    'x-requested-with',
]

4. 路由尾斜杠问题 #

ModelViewSet默认生成的路由带尾斜杠（如/engine/），若前端请求不带尾斜杠，Django会触发重定向导致CORS检查失败。可通过以下两种方式解决：

• 在settings.py中关闭自动添加尾斜杠：

APPEND_SLASH = False

• 修改前端请求地址为http://127.0.0.1:8000/engine/（带尾斜杠）

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