使用带有自定义 header 的 fetch() 时获取 401 错误代码

Question

===

I've built a custom API with AWS API Gateway.
For one of the method, I've enable the authorization to be checked using a Lambda function.
In order to make it work, I have to add the following key: Key: authorizationToken Value: allow .

I've tested it using Postman and it's working fine, my POST is processed and I receive a response.

I'm just starting with Javascript so I've used the code provided in Postman. Here it is:

function getData(event){
    var myHeaders = new Headers();
    myHeaders.set("authorizationToken", "allow");

    var requestOptions = {
      method: 'POST',
      mode: 'no-cors'
    };

    fetch("https://[THE_URL_OF_MY_API]/prod/counter", requestOptions)
      .then(response => response.text())
      .then(result => console.log(result))
      .catch(error => console.log('error', error));
}

And i'm getting the following error message in the console.

script.js:49 POST https://[THE_URL_OF_MY_API]/prod/counter 
net::ERR_ABORTED 401 (Unauthorized)
getData @ script.js:49

I've looked into the logs of the API Gateway in AWS in order to troubleshoot it:

• But I can't see any logs so it seems my fetch is being block before it's even being sent.
• I checked the headers of the successful API call sent by Postman and I can't find any header apart from mine and the one generated by the application automatically.

What am I doing wrong?

Note: I'm using similar code to another endpoint where the authorization is not enabled and it's working fine. SO I guess my header is not correctly set.

Thanks !

Answer 1

@CRice, Salmin Skenderovic, Jaromanda X: Thanks a lot for your feedback.

The missing myHeaders was a typo, I fixed it. Seeing the comment about the 'no-cors', I've looked into it, enable CORS, authorized my specific header in Access-Control-Allow-Headers.

And now it's working fine.

My amended code:

    var myHeaders = new Headers();
    myHeaders.set("authorizationToken", "allow");

    var requestOptions = {
      method: 'POST',
      redirect: 'follow',
      headers : myHeaders
    };

    fetch("https://[URL_OF_MY_API_ENDPOINT]/prod/counter", requestOptions)
      .then(response => response.text())
      .then(result => console.log(result))
      .catch(error => console.log('error', error));

Configuration of my API Gateway: Configuration of my API Gateway