Django 使用React调用REST API时出现CORS错误

我创建了一个restful api，django rest框架可以通过这个URL访问，我正在创建一个React应用程序来调用api并使用它的数据

我正在使用fetch调用api

componentWillMount: function(){
 this.setState({Problemstyle: this.props.Problemstyle})
 fetch('http://192.168.33.10:8002/scenarios/')
 .then(result=>result.json())
 .then(result=> {
   this.steState({items:result})
 })
 },

当我运行我的应用程序时，我的浏览器中出现了一个错误

无法加载获取API。请求的资源上不存在“Access Control Allow Origin”标头。因此，不允许访问源“”。如果不透明响应满足您的需要，请将请求的模式设置为“no cors”，以获取禁用cors的资源

---

我不确定如何解决这个问题，因为我刚刚开始通过

pip Install django cors headers使用React
安装django cors headers

然后，添加已安装的应用程序“corsheaders”

添加设置

CORS_ORIGIN_ALLOW_ALL = True

以及

这应该能奏效

更新

您还需要将其添加到中间件中

MIDDLEWARE = [  # Or MIDDLEWARE_CLASSES on Django < 1.10
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

MIDDLEWARE=[#或Django<1.10上的MIDDLEWARE_类
...
“corsheaders.middleware.Corsmidlware”，
'django.middleware.common.CommonMiddleware'，
...
]

当前接受的答案可能会使网站面临安全风险：

为什么会发生错误： 为了让AJAX请求正常工作，需要做两件事：

服务器必须接受该请求

浏览器必须接受返回的请求，以便客户端可以对其进行处理

OP报告的错误表示此过程的第二部分失败。这是因为，如果请求是从与返回请求的服务器不同的域发送的，则除非设置了相应的头（即，服务器已授予浏览器读取该请求的权限），否则浏览器不会接受该请求

如何修复它： 现在要解决这个问题，我们可以使用

django-cors-headers

。这将添加适当的标题，以便浏览器接受返回的响应。要安装或运行：

pip install django-cors-headers

并将其添加到您的中间件中：

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

现在，您需要将发送AJAX请求的域添加到允许的域列表中：

CORS_ALLOWED_ORIGINS = [
    "www.example.com",
    "http://127.0.0.1:8000",
    ...
]

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
    'http//:localhost:8000',
)

那么

CORS\u ORIGIN\u ALLOW\u ALL

呢？ 除非您有特殊需要，否则不要使用此功能。将此设置为true意味着，任何源站都可以向您的API发出请求并获得响应。除非您正在制作一个公共API，否则您可能不需要这样做。更可能的情况是，您只需要服务一个域或几个域（可能您有一个前端，从不同的地方服务到您的API等）

如果您对任何域访问您的API感到满意，则可以设置以下内容：

CORS_ORIGIN_ALLOW_ALL = True

ALLOWED_HOSTS = ['*']

如果执行此操作，还需要设置以下各项：

CORS_ORIGIN_ALLOW_ALL = True

ALLOWED_HOSTS = ['*']

原因是Django默认情况下只接受某些主机，因此没有任何设置

CORS\u ORIGIN\u ALLOW\u ALL=True

，除非您实际上要接受任何人的请求（这是上面解释的第一部分）

请注意，通过将“允许的主机”设置为通配符，您将面临HTTP主机头攻击。确保您理解这些，并确保您不受影响。你可以阅读更多关于他们的信息

---

另请注意：如果您没有设置

允许的\u主机

，并且您想知道为什么您的请求会工作，这是因为当

DEBUG=True

自动允许某些主机时，

http://127.0.0.1:8000

等

使用django cors标头

首先使用pip安装django cors标头

pip install django-cors-headers

您需要将其添加到project settings.py文件中：

INSTALLED_APPS = (
    ##...
    'corsheaders'
)

接下来，您需要将corsheaders.middleware.corsmidleware中间件添加到settings.py中的中间件类中

MIDDLEWARE_CLASSES = (
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.BrokenLinkEmailsMiddleware',
    'django.middleware.common.CommonMiddleware',
    #...
)

然后，您可以通过添加以下设置为所有域启用CORS

CORS_ORIGIN_ALLOW_ALL = True

或仅为指定域启用CORS：

CORS_ALLOWED_ORIGINS = [
    "www.example.com",
    "http://127.0.0.1:8000",
    ...
]

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
    'http//:localhost:8000',
)

---

需要将位于的django rest framework应用程序配置为发送Access Control Allow Origin响应头。因为当前没有返回响应头，所以浏览器不允许前端JavaScript代码访问响应。因此，您可能希望在服务器上安装这项工作是昨天完成的。今天，当我再次尝试时，它不起作用。任何提示错误是否仍然相同？？检查您的设置是否正常，确保没有任何内容被覆盖。我是否也需要在js上做些什么？？我正在使用axios。请不要为请求传递任何自定义标题，除非没有任何问题。您是否在已安装的应用程序中添加了“corsheaders”？更新了答案