I'm working on a project with Django Rest Framework as back-end and React as front-end. When I set a session variable initially in some function/view and later when I try to access the different view through axios call and in that view if I try to access session variable which i created previously, I get KeyError. Session doesn't seem stored.
I googled I got a similar issue which I'm facing.
Django rest framework Reactjs sessions not working
I followed the process by adding { withCredentials: true } in axios call. Now I'm getting a different error. Now the issue is not able to access the backend. I get an error saying Access to XMLHttpRequest at 'http://127.0.0.1:8000/url/' from origin 'http://localhost:3000' has been blocked by CORS policy
Again I googled the issue which I'm getting and found that I've to add CORS_ORIGIN_WHITELIST in the django settings.py
I followed the below post for that
Django Python rest framework, No 'Access-Control-Allow-Origin' header is present on the requested resource in chrome, works in firefox
I have added CORS_ORIGIN_WHITELIST like this
CORS_ORIGIN_WHITELIST = [
'http://localhost:3000',
'http://127.0.0.1:3000'
]
Still, I'm facing the same issue. I don't know what's going wrong.
Finally after so much of research I found a solution for this.
In the file where we are importing axios to make the call, set the default header below your import
axios.defaults.withCredentials = true;
example:
import axios from "axios";
axios.defaults.withCredentials = true;
axios.get("url")
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error);
});
once this is done go to your settings.py file and add the below configuration
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
so after this if you set a session variable and access it later in any view, you would be able to get the value which you had previously stored.
This solution worked for me. Hopefully if anyone has the same issue, it will work for them too. :)
NOTE
If the session is not storing under localhost:3000 then make sure that you're accessing your front-end application through 127.0.0.1:3000. If you access the front-end application through localhost and if your backend is running on 127.0.0.1 then the session cookie will be set to 127.0.0.1, so changing the front-end URL from localhost:3000 to 127.0.0.1:3000 will solve your problem.
I had a similar issue once. I used firefox as a browser and got the problem solved by installing the CORS everywhere plugin for firefox (https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/). So, if you're using firefox, this might solve your problem.
Related
I am using django 3.2 , i had implemented csrf using below link
Link
Everything works fine when using same domain for client and server.
But while testing locally i get the error when sending post, put or delete requests.
I can see csrftoken in the request headers under cookie, but can't see it using document.cookie.
csrftoken is non httponly cookies, still i don't know why it not visible in document.cookie in client side.
You have to add CSRF_TRUSTED_ORIGINS = ["localhost:3000"] inside your settings.py to allow post requests.
I finally got the solution,
Since my backend was running on other domain not on localhost.
I had added proxy for all the requests, so that they appear to be coming from same origin.
In Angular, it ca be done like below:
proxy.conf.json
{
"/**": {
"target": "<your backend url>",
"secure": false,
"changeOrigin": true
}
}
then run using,
ng serve --proxy-config proxy.conf.json
In Django, I have my login URL set to 'api/auth/login'. When given a username and password, it will log that user in. Running 'python manage.py runserver', it will put that URL at 'http://127.0.0.1:8000/api/auth/login'
However, my React project, when running 'yarn start' is at 'http://localhost:3000/' and giving it the extension 'api/auth/login', the url it attempts is 'http://localhost:3000/api/auth/login'.
This does not work, but if I replace the URL extension with 'http://127.0.0.1:8000/api/auth/login', the login works as expected.
How can I have the URLs work with my React app? Or is this not something that necessarily needs to be fixed? I do plan to host this project somewhere and am not yet sure how the URLs will work out..
One option is to set proxy in the package.json.
Second option is to set axois baseURL:
// add in your code before main component definition
// for example in App.js
import axios from "axios";
axios.defaults.baseURL = "http://127.0.0.1:8000";
I'm preferring the second approach. For doing production build it can be easily overwritten with an environment variable.
import axios from "axios";
axios.defaults.baseURL = REACT_APP_SERVER_URL
Remember to set the CORS headers in the Django server (I'm working on tutorial with an example how to do this).
You are hosting react application on another port that's why when you put a request without mentioning host, it gets appended to your current host i.e. 127.0.0.1:3000. I suggest you write "proxy": '127. 0.0.1:8000' in your package.json (refer https://create-react-app.dev/docs/proxying-api-requests-in-development/) and restart your react server or use full url of django server i.e. 127.0.0.1:8000/
In a Chrome warning, it says:
Specify SameSite=None and Secure if the cookie should be sent in cross-site requests. This enables third-party use.
How do I do this correctly using express-session?
app.use(
cors({
credentials: true,
origin: ["http://localhost:3000", "https://elated-jackson-28b73e.netlify.app"] //Swap this with the client url
})
);
var sess = {
secret: 'keyboard cat',
cookie: {}
}
if (app.get('env') === 'production') {
app.set('trust proxy', 1) // trust first proxy
sess.cookie.secure = true // serve secure cookies
sess.cookie.sameSite = 'none'
}
app.use(session(sess))
you are getting this because you are using a resource from another site and that server is attempting to set a "cookie" but, it does not have the SameSite attribute set, which is being reported in newer versions of browsers.
this (may) also be shown if you are trying to access the server page from local computer (xampp), which generally doesn't has SSL installed;
set the header line in your server page (if in PHP) as below:
header("Set-Cookie: cross-site-cookie=whatever; SameSite=None; Secure");
(remember: this must be solved from the server side.)
i got the same issue when run my code in localhost. The affected resource is _ga, _gid, _utma, _utmz. All of them from unpkg.com
and i got marker image leaflet failed request but doesnt affect the page.
since i dont understand what the specific problem so i just delete the affected resource cookies in inspect element and the code will run without notif again.
thought i know if it's better to not answer based by personal experience. just tell me if it's not help at all.
If you are using Google login button or any other identity service add this:
<GoogleLogin onSuccess={() =>()} onError={() => ()} cookiePolicy='single-host-origin'/>
I'm getting 403 forbidden error for the unsafe methods (PUT, POST, DELETE) in the deployed Django project. I'm using react as front-end.
I'm using axios to send the request to the DRF view. I've included the below lines to send the csrf token with the header as X-CSRFToken.
axios.defaults.xsrfHeaderName = "X-CSRFToken";
axios.defaults.xsrfCookieName = "csrftoken";
axios.defaults.withCredentials = true;
In my local everything is working fine. I've deployed this project with NGINX and Gunicorn in a Linux server. There I'm facing an issue while sending the request with unsafe methods. I'm not sure why its not working when it is deployed in the Linux server.
Can anyone please help me on this. Please :(
I'm building an AngularJS app with Django Rest Framework and Django CORS Headers as backend API.
Everything was working fine until today. Suddenly the csrfcookie and sessionid cookie stopped showing up in Chrome.
I see the API responding to me with the csrfcookie. Chrome doesn't show it in dev tools, however I see it in chrome://settings/cookies.
AngularJS
$httpProvider.defaults.useXDomain = true;
$http.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$http({withCredentials: true, ...})
Django API
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_HEADERS = (
'x-requested-with',
'content-type',
'accept',
'origin',
'authorization',
'X-CSRFToken'
)
Ok so the answer to this issue is quite simple but not always very easy to notice since there are no error messages from the API, nor the client.
The problem above is that I reside on domain.com in my browser, but my request is towards the API is to "www.domain.com:8000". Both www.domain.com and domain.com are allowed origins in my API.
Conclusion here is that if I reside on domain.com then I need to make my API request towards domain.com:8000. But if reside on www.domain.com in my browser, then I need to make my API request towards www.domain.com:8000.
Se a working example down bellow:
Cookies now appear fine!
I hope this helps anyone, saving a few hours of frustration :)
Update:
Enabling the following settings in the Django settings file will also solve the problem. Using them let's you reside on different subdomains in your browser, and the cookies will return for domain ".domain.com"
https://docs.djangoproject.com/en/dev/ref/settings/#csrf-cookie-domain
https://docs.djangoproject.com/en/dev/ref/settings/#session-cookie-domain
Thanks to apollo on irc.freenode.net, #django for the updated answer.