跨域请求阻止了 Django 和 React

Posted 2023-03-04

【中文标题】跨域请求阻止了 Django 和 React

【英文标题】：Cross-Origin Request Blocked Django and React

【发布时间】：2021-04-01 21:31:36

【问题描述】：

我已安装pip install django-cors-headers 仍然无法正常工作

添加到 settings.py 文件中

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

Django 休息框架

【问题讨论】：

这有帮助吗：***.com/questions/44037474/…?

不，它不起作用..我尝试了所有源代码：github.com/avichhetri8/djangowithreact branch dev

尝试将corsheaders.middleware.CorsMiddleware 添加为MIDDLEWARES 列表中的第一项

是上面corsheaders.middleware.CorsMiddleware请查看源代码github.com/avichhetri8/djangowithreact/blob/dev/ecom/…

试试CORS_ALLOW_ALL_ORIGINS=True

【参考方案1】：

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

将 corsheaders.middleware.CorsMiddleware 放在顶部

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

ALLOWED_HOSTS = ['*']

在settings.py底部添加

 CORS_ORIGIN_ALLOW_ALL = True

根据Documentation CorsMiddleware 应该放在尽可能高的位置，尤其是在任何可以生成响应的中间件之前，例如 Django 的 CommonMiddleware 或 Whitenoise 的 WhiteNoiseMiddleware。如果不是之前，它将无法将 CORS 标头添加到这些响应中。

另外，如果你使用 CORS_REPLACE_HTTPS_REFERER，它应该放在 Django 的 CsrfViewMiddleware 之前（见下文）。

【参考方案2】：

通常，对于此类错误，您需要将settings.py 更新为django-cors-headers：

# update backend/server/server/settings.py
# ...
INSTALLED_APPS = [
    #...
    'corsheaders', # add it here
    #...
]

# define which origins are allowed
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
    "http://127.0.0.1:3000"
]

# add to middleware
MIDDLEWARE = [
    #...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    #...
]

有时您还需要设置ALLOWED_HOSTS=["127.0.0.1"] 或您的其他地址（您也可以尝试使用“*”，但仅用于调试）。

您可以在我的文章中查看详细信息：React Token Based Authentication to Django REST API Backend。

还请尝试在网络浏览器中清除缓存的情况下运行测试。

如果这没有帮助，请提供有关您的项目设置的更多详细信息。

【讨论】：

请检查我的源代码它不工作github.com/avichhetri8/djangowithreact/blob/dev/ecom/…