使用 Axios 从前端访问 Django Rest API 时出现 Cors 错误

Posted 2023-03-03

【中文标题】使用 Axios 从前端访问 Django Rest API 时出现 Cors 错误

【英文标题】：Cors error when accessing Django Rest API from front end Using Axios

【发布时间】：2019-09-28 01:19:47

【问题描述】：

使用 axios 访问 django Rest API 出现以下错误

从源“http://localhost:8080”访问“http://api.localhost:8080/auth/register-shop/”处的 XMLHttpRequest 已被 CORS 策略阻止：预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 access-control-allow-origin .

我在此链接https://pypi.org/project/django-cors-headers/ 中添加了 django cors 标头

前端页面

 axios(
                                method: 'post',
                                url: 'http://api.localhost:8080/auth/register-shop/',
                                //url: 'http://api.yuniq.ml/auth/register-shop/',

                                headers: 
                                        "Access-Control-Allow-Origin": "*",
                                        "content-type": "application/json"
                                ,
                                data: 

                                        "name": Name,
                                        "address": Address,
                                        "city": City,
                                        "postalC ode": PostalCode,
                                        "telephone": Telephone,
                                        "openTime": Opentime,
                                        "closeTime": Closetime,
                                        "image_url": Image_url  //still not working 

                                
                        ).then(function (response) 
                                console.log(response);
                        )
                                .catch(function (error) 
                                        console.log(error);
                                );


                

settings.py

INSTALLED_APPS = ['corsheaders']


MIDDLEWARE = [

    'django_hosts.middleware.HostsRequestMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware' , #add cors middleware
    'django.middleware.common.CommonMiddleware',
    'corsheaders.middleware.CorsPostCsrfMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'django_hosts.middleware.HostsResponseMiddleware',
]



CORS_ORIGIN_ALLOW_ALL = True

执行此操作后错误未解决

【问题讨论】：

检查 settings.py 中的 ALLOWED_HOSTS。将其设置为此 ALLOWED_HOSTS = ["*"]

还在 settings.py 中添加了 ALLOWED_HOSTS = ['*']

从前端 javascript 代码中的 axios 调用中删除 Access-Control-Allow-Origin": "*"。

你不能从 django 视图中为你的响应添加访问控制吗？ response = HttpResponse(json.dumps(string)) response["Access-Control-Allow-Origin"] = "*" return response

仍然出现同样的错误

【参考方案1】：

我遇到了同样的问题，做了以下步骤：

我检查了从 Axios 发送的标头。 确保已安装此软件包

'pip install django-cors-headers'

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

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    ...
]

现在有两种选择：

1 - 只需在 settings.py 中添加以下变量即可允许访问所有域：

ALLOWED_HOSTS=['*']

CORS_ORIGIN_ALLOW_ALL = 真

2 - 不允许访问所有域，但您正在使用 API 的域。在settings.py中添加如下变量

ALLOWED_HOSTS=['http://localhost:5000']

CORS_ORIGIN_ALLOW_ALL = 假

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

如果您想在请求中发送特定标头，您还可以在 setting.py 中定义允许收听者。

CORS_ORIGIN_ALLOW_ALL = 真

CORS_ALLOW_HEADERS = [   
    ...
    'Currency',
    ...
 ]

看看这个可以帮助你：

https://dzone.com/articles/how-to-fix-django-cors-error

【参考方案2】：

您的 axios 请求不应包含此标头： "Access-Control-Allow-Origin": "*",

这应该只包含在服务器的响应中。尝试从您的 axios 请求中删除它。

【参考方案3】：

我最近遇到了同样的问题，我已经解决了。我还使用corsheaders 来避免CORS 错误，它工作正常，直到我介绍Authentication。对于那些权限设置为IsAuthenticated 的api，同样的问题再次出现。因此，我在 settings.py 的 ALLOWED_HOSTS 列表中添加了某个主机，并且它起作用了。添加主机有两个选项。

选项 1。ALLOWED_HOSTS=["*"]

选项 2。ALLOWED_HOSTS=['your host1', 'your host2', 'your host3', ......]。

注意：我不喜欢选项 1，因为它会引发安全问题。所以选择选项2。