working with CSRF Azure hosted React and DRF

We have react front end running as a web app in Azure We have a DRF backend running in a container in Azure.

We are using cookies for authentication.

We have a postgres database on the backend.

We are reading data from postgres in our app – works fine We are trying to post to the backend but it is failing due to CSRF issues. It works when we run app and backend locally to test, but once both in Azure we are getting the errors.

CORS_ALLOW_ALL_ORIGINS = False

CORS_ALLOW_CREDENTIALS = True
CORS_ALLOWED_ORIGINS = [
    "http://localhost:5173",
    "https://frontend.azurewebsites.net",
    "https://apibackend.azurewebsites.net",
]

CSRF_TRUSTED_ORIGINS = [
    "http://localhost:5173",
    "https://frontend.azurewebsites.net",
    "https://apibackend.azurewebsites.net",
]

SESSION_COOKIE_SAMESITE = "None"
CSRF_COOKIE_SAMESITE = "None"
SESSION_COOKIE_SECURE = True  # Set True in production over HTTPS
CSRF_COOKIE_SECURE = True  # Set True in production over HTTPS
CSRF_COOKIE_HTTPONLY = False`

Cheers Brad

tried adjusting CSRF cookies and settings - can't get it to work. Api page shows CSRF token correctly, but on the front end we can't post. i can see it sets a token, but it doesn't get used to post, and we get

cookie csrftoken=yy733FgSID318Sr4R9JFX89Can8MiH5K; sessionid=bynkbjagds15k4hj8uj3i3bi7ejp9zgl

POST https://apibackend.azurewebsites.net/api/inspection/inspection/ 403 (Forbidden) index-XLVxCmWM.js:249 Submission error: {detail: 'CSRF Failed: CSRF token missing.'}

Inspection-g5LMpPEp.js:2 Failed to submit inspection: {detail: 'CSRF Failed: CSRF token missing.'}