Amplify-js: TypeError on API request.

[danielcai1987]

* Which Category is your question related to? *
API
* What AWS Services are you utilizing? *
API Gateway
* Provide additional details e.g. code snippets *
I'm trying to add a REST API as this example:

https://aws-amplify.github.io/docs/js/api#post

The headers I set like the following:

let myInit = {
    body: {},
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Credentials": true
    }
  };

But there is an error

error TypeError: headers[key].trim is not a function
    at Signer.ts:110
    at Array.map (<anonymous>)
    at canonical_headers (Signer.ts:105)
    at canonical_request (Signer.ts:155)
    at Function.Signer.sign (Signer.ts:314)
    at RestClient._signed (RestClient.ts:279)
    at RestClient.ts:148

I'm using Amplify in React
[email protected]
[email protected]

Thanks for any help!

[jdathueyt]

Hi, i have the same problem.
And if i remove headers, i have CORS problem...

[ZainlessBrombie]

"Access-Control-Allow-Credentials": true,
True is a boolean. It needs to be a string I think

[Amplifiyer]

@danielcai1987 and @jdathueyt did ZainlessBrombie@ solution worked for you?

[stale[bot]]

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.

[michaelbrant]

Hi, i have the same problem.
And if i remove headers, i have CORS problem...

Same issue here. I tried:
"Access-Control-Allow-Credentials" : "true"

but that causes a CORS error

[jdathueyt]

We need to remove totally the header to have that
let myInit = { body: {} };

And verify on api gateway if response 200 have cors correctly configured

[michaelbrant]

Here's what I have for my OPTIONS method on my resource for response status 200.

API Gateway > Resources > Method OPTIONS > Integration Response > Header Mappings

Access-Control-Allow-Headers  '*' 
Access-Control-Allow-Methods  'OPTIONS,POST'  
Access-Control-Allow-Origin  '*'

[jdathueyt]

What is the request you make with the API? And what error do you have?

[michaelbrant]

Here's my request I'm making:

function getData(){
  let apiName = 'myApi';
  let path = '/api'; 
  let myInit = { 
      headers: {
        'Access-Control-Allow-Origin':'*',
        "Access-Control-Allow-Credentials" : "true"
      }, 
      response: true, // 
  }
  API.post(apiName, path, myInit).then(response => {
      console.log(response)
  }).catch(error => {
      console.log(error)
  });
}

I get this error:
Access to XMLHttpRequest at 'https://mydomain.com/dashboard/api' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

So then I change
"Access-Control-Allow-Credentials" : "true"
to
"Access-Control-Allow-Credentials" : true

And I get this error:

TypeError: headers[key].trim is not a function
    at Signer.ts:110
    at Array.map (<anonymous>)
    at canonical_headers (Signer.ts:105)
    at canonical_request (Signer.ts:155)
    at Function.Signer.sign (Signer.ts:314)
    at RestClient._signed (RestClient.ts:279)
    at RestClient.ts:148

[jdathueyt]

finition getData(){ let apiName = 'myApi'; let path = '/api'; let myInit = { } API.post(apiName, path, myInit).then(response => { console.log(response) }).catch(error => { console.log(error) }); }

Try to remove totally the header from myInit and tell me if there is an error

[michaelbrant]

Removing the headers gives me this error:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

[jdathueyt]

In my opinion, the problem comes from the API gateway. Do you use a lambda_proxy on your integration request ?

[michaelbrant]

No, should I ?

[michaelbrant]

You're right, changing API Gateway to use Lambda Proxy integration worked! Thank you!

[jdathueyt]

Awesome ! I'm glad I could help you :-)

[danielcai1987]

You're right, changing API Gateway to use Lambda Proxy integration worked! Thank you!

Hi @michaelbrant , glad to know you have solved the CORS problem. How do you "change the API Gateway to use Lambda Proxy integration"?

Could you explain some detail steps on how do you add a REST API and lambda function?
I once solved the CORS issue. But now I forgot how to do it again. Thank you

[sashasklar]

Another possible trigger for this error: the values for custom metadata must be strings.

{ level: "private", contentType: file.meta.type, metadata: { custom1: someNumber.toString(), // values must be strings custom2: someString, }, }