When 'localhost' '127.0.0.1' 'No 'Access-Control-Allow-Origin' header is present on the requested resource'

I used django-cors-headers, and config it.

Backend: Django + django-rest-framework

settings.py

ALLOWED_HOSTS = ['*']
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
CORS_ORIGIN_ALLOW_ALL = True

python manage.py runserver 0.0.0.0:8000

Frontend: vue + axios I try 3 url to access http://ip:8000/api/xxx http://127.0.0.1:8000/api/xxx http://localhost:8000/api/xxx

When request host is ip(192.168.1.xxx): It worked ok.

When request host is ‘localhost’ or ‘127.0.0.1’: It did not work

XMLHttpRequest cannot load http://127.0.0.1:8000/api/cameras. 
Redirect from 'http://127.0.0.1:8000/api/cameras' to 'http://127.0.0.1:8000/api/cameras/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:8080' is therefore not allowed access.

Question: Why ‘127.0.0.1’ & ‘localhost’ can not work well, I added CORS_ORIGIN_ALLOW_ALL = True already…

[adamchainz]

Because browsers send Origin: null for localhost/127.0.0.1, use http://127.0.0.1.xip.io/ instead and all will be fine.

[Bijiabo]

I have tried http://127.0.0.1.xip.io/. It not work.