Django / React Cross-Origin Request Blocked Error 托管 Google App Engine django-cors-headers 不工作

Question

应用程序后端 (django) 和前端 (react) 托管在同一应用程序的谷歌云上。 我已经安装了 django-cors-headers 并在 settings.py 中引用了它：

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

CORS_ORIGIN_ALLOW_ALL = True

CORS_ORIGIN_REGEX_WHITELIST = (
    'http://localhost:3000',
    'https?\://myapp\.appspot\.com\/?',
    'https?\://frontend-dot-myapp\.appspot\.com\/?',
)

据我所知，CORS_ORIGIN_ALLOW_ALL 应该已经解决了这个问题，但它没有，我只是有点绝望在那里尝试。 CORS_ORIGIN_WHITELIST 对我来说效果不佳，这就是 CORS_ORIGIN_REGEX_WHITELIST 的原因。

我没有更改此设置中的任何内容，但现在出现了跨域错误。自上次代码更改以来，我安装了 django-silk 来分析应用程序。删除它似乎无法解决问题，所以我不确定它是否相关。

帮助不胜感激！

在 requirements.txt 中： django-cors-headers==3.2.1

编辑

经过反复试验，我发现在 urls.py 中添加最后两行会导致问题：

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', views.api_root),
    path('_ah/warmup/', views.service_status),
    path('_ah/start/', views.service_status),
    ...

但是我不明白为什么会导致 CORS 错误或如何解决它。

Answer 1

我在项目解决方案中也遇到了同样的问题

1. 将 corsheaders.middleware.CorsMiddleware 放在顶部

   MIDDLEWARE = [
   'corsheaders.middleware.CorsMiddleware',
   'django.middleware.security.SecurityMiddleware',
   'django.contrib.sessions.middleware.SessionMiddleware',
   'django.middleware.common.CommonMiddleware',
   'django.middleware.csrf.CsrfViewMiddleware',
   
   ]
   

2. ALLOWED_HOSTS = ['*']

3. 在settings.py底部添加

    CORS_ORIGIN_ALLOW_ALL = True
   

Answer 2

这个想法可能值得一试。尝试将您的 'corsheaders.middleware.CorsMiddleware' 行移到 MIDDLEWARE 部分的顶部。

这是在pypi django-cors-headers documentation 中推荐的，他们说“CorsMiddleware 应该放在尽可能高的位置，尤其是在任何可以生成响应的中间件之前，例如 Django 的 CommonMiddleware 或 Whitenoise 的 WhiteNoiseMiddleware。如果不是之前，它不会是能够将 CORS 标头添加到这些响应中。”

Answer 3

这里勾选'Content-Type':"application/json"，如果输入Contenttype或者ContentType会报CORS header被阻塞的错误