React Native why given cors error in actions when i use django rest framework api on localhost

Question

I am using react native app with api. API coded by django rest framework. I run api in localhost:8000. When i try connect to api with axios i get cors proplem. I added django-cors-header but also it didnt work. Can someone solve it? Thanks.

Frontend/actions.js

export const loginUser = (username, password)=>dispatch=> {
const body =JSON.stringify({ username, password })
// headers
const config ={
    headers:{
        'Accept': 'text/html',
        'Content-Type': 'application/x-www-form-urlencoded',
        // "Access-Control-Allow-Origin": '*'
    }
}
const root =API()

    console.log(body);
    axios.post("http://localhost:8000/api/login/", body, config)
        .then(res =>{
            dispatch({
                type:$AT.LOGIN_USER,
                payload: res.data
            })
        }).catch(err=>{
            console.log(err);
        })

Login.js

const onLoginPressed =() =>{
    const usernameError = nameValidator(username.username);
    const passwordError = passwordValidator(password.password);

    if (usernameError || passwordError) {
        setUsername({ ...username, error: usernameError });
        setPassword({ ...password, error: passwordError });
    }
    else{
        // console.log("GIRIS YAPILIYOR");
        dispatch(loginUser(username.username, password.password));
    }

}

API/settings.py

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',

# my apps
'account',
# third party app
'corsheaders',
'knox',
'rest_framework',
'drf_yasg',
]

 MIDDLEWARE = [
 ....
'corsheaders.middleware.CorsMiddleware',
 ....
]

I give this error on chorme: enter image description here

On Network: Network

Try adding CORS_ORIGIN_REGEX_WHITELIST += [ "http://localhost:8000" ] — Priyanshu Jain, Jan 12 '21 at 14:07

score 0 · Answer 1 · answered Jan 12 '21 at 11:23

You're getting a CORS error because the server is emitted a 400 Bad Request before it gets as far as adding the CORS headers.

It isn't clear why it is spitting out Bad Request because you haven't provided any debugging information about that, but it seems likely it has something to do with you claiming 'Content-Type': 'application/x-www-form-urlencoded' when the body is JSON and not form encoded data.

score -1 · Answer 2 · answered Jan 12 '21 at 13:41

-1

if you want to work with axios please configure with IP address you can check ifconfig and run django python manager.py runserver ip: 8000

answered Jan 12 '21 at 13:41

Kenedy Nopriansyah

610
4
6

React Native why given cors error in actions when i use django rest framework api on localhost

2 Answers2