Question

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

CORS策略已阻止从来源“ http://api.localhost:8080/auth/register-shop/”访问“ http://localhost:8080”处的XMLHttpRequest：Access-Control-Allow-不允许请求标头字段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

执行此操作后错误未解决

Answer 1

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

选项1。ALLOWED_HOSTS=["*"]

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

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

Answer 2

我遇到了同样的问题，并执行了以下步骤：

我检查了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 = False

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

Answer 3

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

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

使用Axios从前端访问Django Rest API时发生Cors错误

3 个答案: