Forbidden (CSRF cookie not set.) for POST Requests

Using Django Forms & APIs
1

Hi I’ve viewed a lot of threads regarding some issues similar to this, but none actually solved it.
Whenever I create a POST API for my django backend and make a request I get Forbidden (CSRF cookie not set.): /customers/add/ (example).

A very basic view, I’ve tried adding @csrf_exempt

def save_cart(request):
    return HttpResponse("Done")

Also I’m sending the correct csrfToken from the frontend I’ve manually checked it.
My settings.py


CSRF_COOKIE_SECURE = False

CSRF_COOKIE_HTTPONLY = True

SESSION_COOKIE_SECURE = None

SESSION_COOKIE_HTTPONLY = True

CORS_ALLOW_CREDENTIALS = True

CORS_ALLOW_HEADERS = [
    "access-control-allow-credentials",
    "content-type",
    "X-Csrftoken"
    # Add any other headers you need to allow here
]

CORS_ORIGIN_WHITELIST = ["http://localhost:3000", "http://192.168.56.1:3000"]

CORS_ORIGIN_ALLOW_ALL = True

CSRF_COOKIE_DOMAIN = [
    "http://localhost:3000",
    # Add other cookie domain here if needed
]

CSRF_TRUSTED_ORIGINS = [
    "http://localhost:3000",
    # Add other CSRF trusted origins here if needed
]

ALLOWED_HOSTS = [
    "*",
    # Add other allowed hosts here if needed
]

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",
]

I’ve tried most possible solutions since none of them worked so I’ve created this thread. Thanks in advance.

2

For more info, my React codebase just for that API looks like this, where I’m adding csrfToken in headers.

const base_url = "http://localhost:8000";

async function getCSRFToken() {
  const response = await fetch(`${base_url}/get-csrf-token/`);
  const data = await response.json();
  return data.csrfToken;
}

export const addToCart = async (id) => {
  const csrfToken = await getCSRFToken();

  await fetch(`${base_url}/customers/cart/save/${id}`, {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
      "X-Csrftoken": csrfToken,
    },
  });
};
3

@Seek4samurai did you ever solve this issue? having the same issue

4

Same even I am facing the same issue

5

If you are requesting assistance with this, I suggest you open a new topic.

Please include the complete error that you are receiving. There is something like 6 different error messages that can be generated, each slightly different and an indication of a different problem.