Как управлять CORS в Django

Я пытаюсь соединить React.js[axios] и Django [хостинг в Heroku] и каждый раз получаю следующее enter image description here

Я разрешил своему хосту подключиться, но он не работает

CORS_ALLOW_ORIGINS = [
    'localhost',
    'https://itbookcom.herokuapp.com/'
]

CSRF_TRUSTED_ORIGINS = [
    'localhost',
    'https://itbookcom.herokuapp.com/'
]

и вот часть подключения react.js

constructor(props) {
        super(props);

        this.state = {
            bookList: [],
            error: null,
        };
    }
    refreshList = () => {
        axios
            .get('https://itbookcombackend.herokuapp.com/api/books/')
            .then((res) => this.setState({ bookList: res.data }))
            .catch((err) => console.log(err));
    };

    componentDidMount() {
        this.refreshList();
    }

Вы можете разрешить все для отладки (НЕ используйте это в производстве): В вашем представлении вы можете добавить следующее

from django.views.decorators.csrf import csrf_exempt

@csrf_exempt

В settings.py

CORS_ALLOW_ALL_ORIGINS = True
CORS_ALLOW_CREDENTIALS = True

Вы можете попробовать внести в белый список происхождение

CORS_ORIGIN_ALLOW_ALL = False
CORS_ORIGIN_WHITELIST = [
    'localhost',
    'https://itbookcom.herokuapp.com/'
]

У меня была такая же проблема, и я успешно ее решил. Я написал пошаговый блог о том же. Вот ссылка, на которую вы можете ссылаться.

Когда возникает проблема CORS origin Header, это просто означает, что сервер и клиент не известны друг другу (неизвестный запрос отправлен на сервер).

Для решения этой проблемы вы можете воспользоваться следующими шагами

pip install django-cors-headers // this will install cors header package

Добавьте/обновите это в файлах настроек

ALLOWED_HOSTS = ['127.0.0.1','localhost','your_domain']

И в разделе django middleware file добавьте следующий код

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

]

Сделав это, проблема будет решена.

В основном это связано с блокировкой происхождения CORS в целях безопасности.

Вернуться на верх