#討論 django + React,CSRF 問題

如題 前端在localhost,是http://localhost:3000 後端在aws ec2上,是 http://<ipv4 address>:8000 - 問題: 在前端發送 POST requests 到後端的時候,如果啟用 django 的 CSRF Middleware django 就會報error:Forbidden 403 (CSRF cookie not set.) 但是如果不開CSRF Middleware就可以正常運作。 為了資料的安全性,我還是打算開 CSRF(當然最後如果還是無解那我也沒辦法⋯⋯) - 目前嘗試手段: ▪後端django settings.py: ▍CORS_ALLOWED_ORIGINS = ["http://localhost:3000", f"http://{HOST_AWS_EC2}"] ▍CORS_ALLOW_CREDENTIALS = True ▍CSRF_TRUSTED_ORIGINS = ["http://localhost:3000", '<ec2 ip address>'] ▍ALLOWED_HOSTS = [ 'localhost', '<ec2 ip address>' ] ▍CSRF_COOKIE_NAME = "csrftoken" ▍CSRF_COOKIE_SAMESITE = "None" #開發環境設置為none ▍CSRF_COOKIE_SECURE = False ▍CSRF_COOKIE_HTTPONLY = False ▍CORS_ALLOW_HEADERS = [ "content-type", "X-CSRFToken", ] ⋯ 後端api的部分也已經加了getCSRFtoken的api 前端也有在首頁就先打getCSRFtoken這支api,確認在storage→cookie,有一個後端域名的csrftoken 但就是在post requests的時候, document.cookie是空的。 getCookie()拿不到document.cookie 於是header沒有帶到cookie 所以 POST requests的CSRFToken=null 最後被django擋下來 ps.但同時,我確定application>storage>cookie裡面有域名來自後端的csrftoken 以下是前端的code:
megapx
⋯ 解這個問題一整天了,基本上django該設定的我應該都有設定⋯⋯ 唯一有問題的是以下這兩個 ▍CSRF_COOKIE_SAMESITE = "None" ▍CSRF_COOKIE_SECURE = False 因為CSRF_COOKIE_SECURE 要設置成false的條件,好像必須在https環境下 那在http的情況下,這個問題是否無解了? 要嘛我把前後端都設定成https,要嘛我把csrf middleware關掉? 雖然最主要的問題是,我不知道為什麼瀏覽器cookie中明明有後端的 csrftoken,但是POST requests的時候header卻不會自動攜帶後端的csrftoken⋯⋯
留言
更新一下,按照上面大家的建議,我後來在localhost開django後端和react前端 (因為想要簡化問題所以前後端都是在本地端測試) 後端:http://127.0.0.1:8000 前端:http://localhost:3000 django的設定也都加了public ip和privacy ip,如圖
megapx
但問題還是一樣⋯⋯ 1.getcsrf有拿到csrftoken,header有set-cookie
megapx
megapx
2.查看cookies有來自後端的csrftoken
megapx
3.但是發送post /submit/請求的時候,header沒有帶到csrftoken
megapx
megapx
還好看起來不是ec2的問題 因為就算前後兩端都在localhost也不行⋯⋯完蛋了啊啊啊這樣以後要怎麼在local開發Orz
B8(已編輯)