Мой внешний интерфейс (React) и внутренний (Django) разделены и работают на localhost:3000
и 127.0.0.1:8000
соответственно.
Рассмотрим следующий запрос внешнего интерфейса:
async function test() {
let token = await getCsrfToken() // fetched from other endpoint
let url = 'http://localhost:8000/test'
let response = await fetch(url, {
method: 'POST',
headers: {
'X-CSRFToken': token,
},
credentials: 'include',
})
let response_text = await response.text()
return response_text
}
test()
до следующей конечной точки:
def test(request):
return HttpResponse('OK')
Работает нормально. Но если я изменю:
let url = 'http://localhost:8000/test'
на:
let url = 'http://127.0.0.1:8000/test'
, произойдет сбой с:
Запрещено (готовить CSRF ie не установлено.) : / test
Насколько я понимаю, localhost
и 127.0.0.1
должны быть синонимами. Почему это не так в этом контексте?
Что меня смущает еще больше, так это то, что сервер разработки Django явно работает на 127.0.0.1:8000
.
Примечание. Я использую промежуточное ПО django-cors-headers
и следующие настройки CORS / CSRF:
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = ['http://localhost:3000']
CSRF_TRUSTED_ORIGINS = ['localhost:3000']