I’m trying implement a login form where I’m passing the username and password to backend but I’m getting a 403 forbidden request error. Here is my frontend code where I’m sending username and password along with header named ‘Access-Control-Allow-Origin.
const login = (username, password) => {
return axios
.post(
API_URL + "signin/",
{
username: "[email protected]",
password: "password",
},
{
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
},
}
)
.then((response) => {
if (response.data.accessToken) {
localStorage.setItem("user", JSON.stringify(response.data));
}
return response. Data;
});
};
This is my settings.py file in backend:
ALLOWED_HOSTS = ['*']
INSTALLED_APPS = [
......
'rest_framework_simplejwt.token_blacklist',
'rest_framework_simplejwt',
'rest_framework',
'corsheaders',
]
MIDDLEWARE = [
..........
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
]
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = False
CORS_ALLOW_HEADERS = ['*']
And this is the views.py file:
@api_view(['POST'])
def signin(request):
username = request.data.get('username')
password = request.data.get('password')
print(username," ",password)
return JsonResponse(username)
I’m trying to debug this error from the past few hours but haven’t found a solution yet. On trying to debug, sometimes I also get the CORS error when I make a few changes to the settings.py file.
I tried searching for answers on stack overflow but those solutions didn’t work for me. I know it should be a minor issue but am not able to spot it.