Gitpod环境下Django+React项目CORS跨域报错排查求助

问题描述 #

我在Gitpod中开发React前端+Django后端项目，怀疑Gitpod增加了问题复杂度。目前python manage.py runserver可正常运行，也能通过API根路径访问Django Rest Framework；Create-React-App前端能请求外部API，但请求自身Django API时触发CORS错误：

Access to fetch at 'https://8000-anthonydeva-sylvanlibra-8b5cu5lyhdl.ws-us107.gitpod.io/lineitem/' from origin 'https://3000-anthonydeva-sylvanlibra-8b5cu5lyhdl.ws-us107.gitpod.io' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我知道django-cors-headers是推荐解决方案，但安装并在settings.py中配置后仍出现相同错误，且Django服务器未显示失败请求日志。我是新手，信息不足可补充，恳请协助排查。

附settings.py配置代码：

INSTALLED_APPS = [
    'corsheaders',
    # 'django_filters',
    'library.apps.LibraryConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
]

MIDDLEWARE = [
    "corsheaders.middleware.CorsMiddleware",
    'django.middleware.security.SecurityMiddleware',
    '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',
]

# CORS_ALLOWED_ORIGINS = [
#     'https://3000-anthonydeva-sylvanlibra-37g1pm5kjx9.ws-us107.gitpod.io',
# ]

CORS_ALLOW_ALL_ORIGINS = True 

CORS_ORIGIN_ALLOW_ALL = True #I have seen both of these, so I tried both

# CORS_ORIGIN_WHITELIST = [
#     'https://3000-anthonydeva-sylvanlibra-8b5cu5lyhdl.ws-us107.gitpod.io/'
# ]

ALLOWED_HOSTS = [ '*' ]

CORS_ALLOW_HEADERS = [ '*' ]

CSRF_TRUSTED_ORIGINS = [ 'https://***.gitpod.io' ] 

ROOT_URLCONF = 'sylvan.urls'

CORS_ALLOW_CREDENTIALS = False


TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'sylvan.wsgi.application'

排查步骤 #

• 确认版本兼容性：不同Django版本对应不同的django-cors-headers版本（比如Django 4.x需要cors-headers >=3.10.0），执行pip show django-cors-headers查看当前版本，对照兼容表调整。
• 强制重启Django服务：修改settings.py后必须重启python manage.py runserver，否则新配置不会生效，这是新手最容易忽略的点。
• 修正CSRF_TRUSTED_ORIGINS：把配置里的https://***.gitpod.io替换成实际的前端域名（比如https://3000-anthonydeva-sylvanlibra-8b5cu5lyhdl.ws-us107.gitpod.io），或者用通配符https://*.ws-us107.gitpod.io覆盖所有同区域的Gitpod域名。
• 检查Gitpod端口状态：确保Django的8000端口在Gitpod中设置为"Public"，如果是"Private"，前端无法正常发起跨域请求。
• 验证响应头：用浏览器直接访问/lineitem/接口，打开开发者工具查看响应头是否包含Access-Control-Allow-Origin字段，如果没有，说明cors-headers未生效，需重新检查安装和配置。
• 清除浏览器缓存：旧的CORS响应可能被缓存，导致新配置不生效，用无痕模式测试。
• 检查请求Origin：在Django视图中添加代码print(request.META.get('HTTP_ORIGIN'))，查看是否能正确获取前端域名，确认Gitpod没有拦截该请求头。

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