It's basically this question: cross origin access issues - django 2.1.7
But it's still not correctly answered. Is this still a JS thing? Or are we missing something?
The original question:
I have gone through literally all SO links, reinstalled django and django-cors-headers and followed this to the T and yet we get
pre flight error cross origin not allowed
Django version 2.1.7
relevant sections of settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'corsheaders',
'uploads.core',
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'corsheaders.middleware.CorsMiddleware',
'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',
]
CORS_ORIGIN_ALLOW_ALL = True
Even with corsheader middlewear at the top, same error code arrives.
[Error] Cross-origin redirection to https://a.tile.openstreetmap.org/14/4684/6268.png denied by Cross-Origin Resource Sharing policy: Origin http://localhost:8000 is not allowed by Access-Control-Allow-Origin.
[Error] Cannot load image http://a.tile.openstreetmap.org/14/4684/6268.png due to access control checks.
It seems like the only way is to simply Disable Cross-Origin Security. You can look it up on Google; I'm not sure if you still need CORS middlewear for production (i.e. hosted, deployed, served via url) however.
Related
Can't figure out what's wrong with my Django DRF api endpoint. I'm getting a CORS error
Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource at http://127.0.0.1:8000/api/. (Reason: CORS
header ‘Access-Control-Allow-Origin’ missing). Status code: 200.
Problem is, I followed every step online to fix this.
I've installed 'django-cors-headers'
Added corsheaders app to INSTALLED_APPS above rest_framework
and the app that includes api endpoint.
Added cors middleware to the top of the middleware list in
settings.py
Added 'CORS_ALLOWED_ORIGINS = ('http://localhost:3000' # React
app) (Also tried with CORS_ORIGIN_ALLOW = True)
Quadruple-checked that API POST request includes a trailing slash.
Nothing seems to fix it. Am I forgetting something? Thanks for any help.
This is my settings.py:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'corsheaders',
'rest_framework',
'core.apps.CoreConfig',
]
CORS_ALLOWED_ORIGINS = (
'http://localhost:3000', # for localhost (REACT Default)
)
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'corsheaders.middleware.CorsMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
'django.middleware.common.CommonMiddleware',
]
Not sure how revelant it is, but If I send POST request from insomnia, it works fine, but from React, it doesn't, this is my react request just in case:
const postSomeData = async () => {
const res = await axios.post(
"http://127.0.0.1:8000/api/",
{ promptQuery: "pls just work already" },
{
headers: {
"Content-Type": "application/json",
},
}
);
};
Thank you!
The code looks fine ,it seems middleware order issue. Would you try putting corsheader middle between sessionmiddleware and commonmiddleware ..
something like this :
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'corsheaders.middleware.CorsMiddleware', #here
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
since the order of middleware matters.
I faced an issue with a CORS policy and cannot see what is wrong.
I use Django framework and my static files are hosted in Azure Blob
So I am getting errors for these files and it says tuat Access-Control-Allow-Origin is not present:
What is strange that other files from the same host are loaded..
CORS settings looks like this:
ALLOWED_HOSTS = ['https://support.mdesk.lt', 'https://suppaccountstorage.blob.core.windows.net']
CORS_ORIGIN_ALLOW_ALL = False
CORS_ORIGIN_WHITELIST = (
'https://support.mdesk.lt',
'https://suppaccountstorage.blob.core.windows.net',
)
CSRF_TRUSTED_ORIGINS = ['https://support.mdesk.lt']
INSTALLED_APPS = [
'corsheaders',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'django.contrib.sites',
'django.contrib.humanize',
'bootstrap4form',
'supportSystem',
'storages'
]
SITE_ID = 1
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
Wham am I doing wrong?
Loading fonts from a different origin is affected by the CORS settings (your CSS files seem to be fine). Since your assets are not served by the Django application but by the Azure storage you need to adjust the CORS settings there (they will not be processed by the Django middleware you are using). You can change the settings in the Azure Portal.
I'm using react on the frontend side and Django on the backend. I using django-cors-headers
for managing CORS in my Django app.
I have added the package in INSTALLED_APPS like this:-
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework.authtoken',
'rest_framework',
'corsheaders',
'services',
'feeds',
'knox',
'users',
]
then I have also added same in MIDDLEWARE
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
'django.middleware.common.CommonMiddleware',
]
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
ALLOWED_HOSTS = ['*']
and I'm passing CORS headers from my client-side React app like:-
const Axios = axios.create({
baseURL: `${BASE_URL}/api`,
timeout: 1000,
headers: {
'X-Custom-Header': 'foobar',
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'
}
})
Error on frontend:-
Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/register' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.
Access-Control-Allow-Origin header is sent by server, not by frontend. Server also does not send this header always. Whenever client sends origin header, only then server sends Access-Control-Allow-Origin and when origin is not matched, CORS error in thrown. If you used create-react-app to bootstrap your react project, they have really nice documentation how to configure proxy, that way you dont have to configure CORS on backend. In django configuration try to remove ALLOWED_HOSTS = ['*'] line, CORS_ORIGIN_ALLOW_ALL = True should work for all.
there was a bug in my client-side headers'X-Custom-Header': 'foobar', after removing it started working fine
I'm trying to use my DRF API in my React Web App with Axios but I'm getting CORS policy blocked.
I've checked the headers using POSTMAN and seems like django-cors-header is not actually embedding the Access-Control-Allow-Origin: *
This is my settings.py from Django:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'trvl',
'rest_framework',
'coreapi',
'django_filters',
'corsheaders',
]
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
]
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = False
And this is what I get from POSTMAN
How can I fix this so every response has the Access-Control-Allow-Origin : *
I had the exact same scenario as you. Same frontend and backend.
I was able to resolve my issue by adding this to my settings.py in addition to everything you listed.
CORS_REPLACE_HTTPS_REFERER = True
In settings.py
set ALLOWED_HOSTS = [] to ALLOWED_HOSTS = ["*"]
I am a newbie to django/django-rest-framework. I am experimenting with React for the frontend and Django-rest-framework for the backend. The client and server are on different domains. I was able to make a GET request, for POST request I also manage to do it but only with the csrf_exempt decorator, which is not ideally. The django documentation recommended me to use CSRF_TRUSTED_ORIGINS to avoid csrf verification but that also doesn't work for me. Here's my settings.py
INSTALLED_APPS = [
'api.apps.ApiConfig',
'rest_framework',
'corsheaders',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
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_WHITELIST = (
'localhost:3000',
)
CSRF_TRUSTED_ORIGINS = [
'localhost:3000'
]
Should I start implementing jwt-authentication to avoid this situation ? What is the best approach to this problem?