Click here to Skip to main content
14,930,087 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
i have an issue while i call get api http://localhost:8000/auth/users/me/(django djoser simplejwt) cors blocked issue is occure.cant get any data and api error is happening.

my react frontend like this
JavaScript
export const fetchUser  = () => {
console.log(localStorage.getItem('token'))
const config = {

    headers: {
        'Authorization': `Bearer ${localStorage.getItem('token')}`,
        "Access-Control-Allow-Origin" : "",
        "Allow": "GET",
        "Content-type": "Application/json",

    
    }
};
debugger

return dispatch => {
    // dispatch(fetchUser());
    // debugger
    axios.get(`${process.env.REACT_APP_API_URL}/auth/users/me/`,config)
        .then(response => {
            dispatch({
                type:USER_SUCCESS ,
                payload: response.data
            });
        })
        .catch(error => {
            dispatch(userFailure(error));
        });
};

and error like this.this only happen when I am using get method
Quote:
Access to XMLHttpRequest at 'http://localhost:8000/auth/users/me/' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response. xhr.js:177 GET http://localhost:8000/auth/users/me/

my backend is fixed with all cors settings
INSTALLED_APPS = ["'corsheaders',]
MIDDLEWARE = ['corsheaders.middleware.CorsMiddleware',]
CORS_ORIGIN_ALLOW_ALL = True

and also used whitelist allow.

What I have tried:

i used allow extension in chrome for temprarory.
Posted
Updated 2-Dec-20 6:17am
v2

1 solution

Quote:
JavaScript
const config = {
    headers: {
        'Authorization': `Bearer ${localStorage.getItem('token')}`,
        "Access-Control-Allow-Origin" : "",
        "Allow": "GET",
        "Content-type": "Application/json",
    }
};
There is absolutely no point in setting the Access-Control-Allow-Origin and Allow headers on your request. These headers must be sent as part of the response by the remote server.

Cross-Origin Resource Sharing (CORS) - HTTP | MDN[^]

The error message clearly tells you that it is the request header which is the problem:
Quote:
Request header field access-control-allow-origin is not allowed
   
Comments
Member 15009998 2-Dec-20 12:54pm
   
i didnt get you
Richard Deeming 3-Dec-20 4:08am
   
Then you need to read and understand the MDN link I provided, since you clearly don't know how CORS works.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900