Django+Svelte通过ngrok测试时CORS跨域问题求助

问题现象 #

本地运行Django+Svelte平台无异常，但通过ngrok隧道供外部测试时，触发CORS错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://452c-102-159-49-36.ngrok-free.app/api/courses/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200

相关代码与配置 #

Svelte组件API调用代码 #

async function fetchCourseOptions() {
  try {
    const response = await fetch(
      "https://452c-102-159-49-36.ngrok-free.app/api/courses/"
    );
    const data = await response.json();
    courseSelected = true;
    return data.courses;
  } catch (error) {
    console.error("Error while fetching course options:", error);
    return [];
  }
}

ngrok隧道配置 #

tunnels:
  django:
    proto: http
    addr: 127.0.0.1:8000
  svelte:
    proto: http
    addr: 5173

ngrok转发域名 #

Forwarding                    https://25fc-102-159-49-36.ngrok-free.app -> http://localhost:5173                                                      
Forwarding                    https://452c-102-159-49-36.ngrok-free.app -> http://127.0.0.1:8000  

Django settings.py相关配置 #

ALLOWED_HOSTS = ["452c-102-159-49-36.ngrok-free.app", "localhost"]


# Application definition

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "profikapp.apps.ProfikappConfig",
    "smart_selects",
    "api.apps.ApiConfig",
    "corsheaders",
]

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

ROOT_URLCONF = "profik.urls"

CORS_ALLOWED_ORIGINS = [
    "http://localhost:5173",
    "https://25fc-102-159-49-36.ngrok-free.app",
    "https://452c-102-159-49-36.ngrok-free.app",
    "https://5ab8-102-159-49-36.ngrok-free.app",
]

排查方向 #

• CORS中间件顺序错误：corsheaders.middleware.CorsMiddleware必须放在django.middleware.common.CommonMiddleware之前，当前配置中它在末尾，会导致CORS头无法正确注入。调整MIDDLEWARE顺序，将corsheaders.middleware.CorsMiddleware移至django.middleware.common.CommonMiddleware上方。
• ngrok域名动态变化：ngrok每次启动会生成新域名，当前CORS_ALLOWED_ORIGINS中的旧域名可能已失效，或朋友测试用的是未配置的新域名。可临时设置CORS_ALLOW_ALL_ORIGINS = True验证问题，确认后添加正确的新域名到配置中。
• Django服务器未重启：修改settings.py后必须重启Django开发服务器，否则新配置不会生效。
• 请求来源不匹配：确认朋友实际访问的Svelte域名是否为https://25fc-102-159-49-36.ngrok-free.app，若为其他新生成的域名，需补充到CORS_ALLOWED_ORIGINS。
• 协议一致性问题：确保CORS_ALLOWED_ORIGINS中的域名均为https开头，与ngrok默认的HTTPS协议一致，避免写成HTTP。

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