如何修復 CORS - 相同的域、Django API 和 React 站點

Question

我有一個用 Vercel 部署的 React 頁面，它向 Django Web 服務器發出請求。 我已將它們放在我的域下：一個是 page.example.com，另一個是 api.example.com。 但是，當頁面向 api.example.com 發出請求時，我收到了 CORS 錯誤。

如果我將鼠標懸停在 chrome 中，則消息為：

跨域資源共享錯誤：HeaderDisallowedByPreflightResponse

在控制台中，這是錯誤；

從源“https://site.example.com”訪問“https://api.example.com/api/example_route/”處的 XMLHttpRequest 已被 CORS 策略阻止：請求標頭字段 access-control-allow-origin Access-Control-Allow-Headers 在預檢響應中不允許。

當我查看 Azure Web 應用程序時，在流日志中，我只看到 OPTIONS 請求，而不是 GET。

我的設置如下所示：

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'api.apps.ApiConfig',
'djoser',
'rest_framework.authtoken',
"rest_framework_api_key",
'oauth2_provider',
'drf_api_logger',  
'corsheaders',
]


MIDDLEWARE = [                                                                   
'django.middleware.security.SecurityMiddleware',
'whitenoise.middleware.WhiteNoiseMiddleware',
'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', 
'drf_api_logger.middleware.api_logger_middleware.APILoggerMiddleware'                   

]

我試過了

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_ALL_ORIGINS = True

也

CORS_ALLOW_ALL_ORIGINS = False
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOWED_ORIGINS = ["https://page.example.com"]
CORS_ORIGIN_WHITELIST = ("https://page.example.com')

，無濟於事。

Answer 1

我們不應該在前端代碼中添加 Access-Control-Allow-Origin 作為請求標頭。

Access-Control-Allow-Headers 在預檢響應中不允許請求標頭字段 Access-Control-Allow-Origin，因此它只會出現問題，除非 Web 服務器已配置為發送 Access-Control-Allow-Headers： Access-Control-Allow-Origin 響應標頭。

簡而言之：它只是一個響應頭，而不是請求頭。

參考： “請求標頭字段 Access-Control-Allow-Origin 在預檢響應中不允許訪問控制允許標頭”盡管 CORS 配置有效