TypeError: headers[key].trim is not a function

Issue

I’m trying to execute an API on AWS, that requires a CORS headers, i make the request with all the information but i receive the next error:

"TypeError: headers[key].trim is not a function"

If i not send de CORS, i receive the error:

from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

My code:

async function Request(){
    let arra = "test"
    const data2 = {
        "parm1" : "one", "parm2" : "two"
    };
    const headers = {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Credentials": true
    };
    try{
        const resp = await API.post("Lambda", "/admin/digital/app/uploadtodynamo", {
            body: data2, headers: headers
        });
        console.log("error 1")
        console.log(resp)
    }
    catch(error)
    {
        console.log("error 2")
        console.log(error)
    }
}

React version: "^16.12.0"

Amplify: "^2.2.5"

Solution

Header Values have to be strings. At some point during sending your request, you (or some library) are trimming the header values from trailing and leading whitespaces. But as the value of the Access-Control-Allow-Credentials header is a boolean and not a string this doesn’t work.

Change

"Access-Control-Allow-Credentials": true 

to

"Access-Control-Allow-Credentials": "true"

Answered By – derpirscher

Answer Checked By – Willingham (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.