Cannot get actual response from server

Question

I think cors or some other library is masking actual response. It is impossible to do error handling in this case. How can I access the actual response? When I view the XHR response error has come correctly but I can not access it.

xhr response and data response

const kaydol = (user) => {
    console.log(name,email,password);
    return fetch(`${API}auth/register`,{
        method : "POST",
        headers : {
            "Accept" : 'application/json',
            "Content-Type" : "application/json"
        },
        body : JSON.stringify(user)
    });
};

const clickSubmit = (event) => {
    event.preventDefault();
    if(name==="" || email==="" || password===""){
        return setValues({...values, error: "Boş alan bırakmayınız", success:false});
    }
    kaydol({nickname : name, email, password}).then(res => {
        console.log("data",res);
        if(res.ok === false){
            setValues({...values, error: res.statusText, success: false});
        }
        else{
            setValues({...values, 
            name: '',
            email: '',
            password: '',
            error : '',
            success: true});
        }
    }).catch(error_r=>{
        console.log(error_r);
    })
};

Answer 1

The fetch API does not return data directly. Instead the returned object is a stream-like object that needs to be processed before you can access the data:

kaydol({nickname : name, email, password})
    .then(res => {
        // res is NOT the real response. You need to process it here
        return res.json(); // since it's JSON
    })
    .then(second_res => {
        console.log(second_res); // THIS is the actual respose
    })

You need two then s or await s every time you use the fetch API