跨域请求被阻止 - 使用 Axios 和 Django REST答案

【问题标题】：Cross-Origin Request Blocked - Using Axios and Django REST跨域请求被阻止 - 使用 Axios 和 Django REST
【发布时间】：2023-03-28 10:46:01
【问题描述】：

我正在尝试在我的应用程序中发出 GET 请求，该请求在节点服务器上使用本地服务（端口 8080）。我正在使用 Axios 向也在本地提供服务的 django REST 服务器（端口 8000）发出请求。

我的请求如下：

axios.get('http://127.0.0.1:8000/recipes/',{headers: {"Access-Control-Allow-Origin": "*"}})

在 Django 方面，我已将这些包含在我的中间件中

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

这在我安装的应用程序中：

INSTALLED_APPS = [
    'corsheaders',
]

并包含此设置：

CORS_ORIGIN_ALLOW_ALL = True

但我仍然收到 CORS 错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8000/recipes/. (Reason: missing token ‘access-control-allow-origin’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel).

知道我错过了什么吗？

【问题讨论】：

stackoverflow.com/questions/35760943/…的可能重复

标签： django-rest-framework axios

【解决方案1】：

我想通了。

我需要删除：

{headers: {"Access-Control-Allow-Origin": "*"}

来自请求。显然，标头应该只是响应的一部分。

删除后，一切正常。

【讨论】：

【解决方案2】：

你需要创建一个 axios 实例，将你的 url 的域部分放在 baseUrl 中，其余的放在 get 中，就是这么简单。

var instance = axios.create({
    baseURL: "http://localhost:8088"
  });

  instance.get(url)
      .then(function(response) { 
    })

【讨论】：