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

[liuxue0905]

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.

[RenderCoder]

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

[Aliemeka]

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

[adamchainz]

@Aliemeka and you're loading the page at 127.0.0.1.xip.io ?

[Aliemeka]

Don't worry, I have fixed the issue. I didn't add a backlash the end of the URL. I was trying '127.0.0.1:8000/api' instead of '127.0.0.1.8000/api/' Thanks anyway

…

On Wed, Jan 15, 2020 at 3:54 PM Adam Johnson ***@***.***> wrote: @Aliemeka <https://github.com/Aliemeka> and you're loading the page at 127.0.0.1.xip.io ? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#241?email_source=notifications&email_token=AF33DT7SJXZZ4A4JPN73ABTQ54PR3A5CNFSM4DTD42W2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEJASOQI#issuecomment-574695233>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AF33DT76I47K6VN7HKI3JRDQ54PR3ANCNFSM4DTD42WQ> .