Tuesday, 5 March 2019

ReactJs No Authorization Header is present

I am trying to get json data returned from my api call using reactjs. 1. I tried running url with valid bearer token on fiddler and it gave me correct results. 2. I tried using same url in below fetch call and used the same fiddler generated bearer token in react code.

It throws 401 unauthorized error.

I compared point 1 and point 2 fiddler requests under tab AUTH. One has correct bearer token but 2nd one i.e react code says "No Authorization Header is present". I am sending Token in react code but why it says "No Authorization Header is present"

componentDidMount () {
  const url = 'my reallyworking api url on fiddler';
  fetch(url
    , {
      method: 'POST',
      crossDomain: true,
      mode: 'no-cors',
      headers: new Headers({
        'Authorization': 'Bearer ' + 'token generated from fiddler after running auth',
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      })
    }
  )
    .then(res => res.json())
    .then(
      (result) => {
        alert('success');
        this.setState({
          isLoaded: true,
          gridData: result.items
        });
      },
      (error) => {
        this.setState({
          isLoaded: true,
          error
        });
      }
    );
}

Fiddler is not showing any Headers. Below is my fiddler tracking

POST https://myurl HTTP/1.1
Host: myHost
Connection: keep-alive
Content-Length: 0
accept: application/json
Origin: https://localhost:xyz
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.119 Safari/537.36
Referer: https://localhost:xyz/testfetch
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9

Note: 1. I created a headers object headers: new Headers({'content-type': 'application/json'}),as explained here 2. I am not using isomorphic fetch as explained here



from ReactJs No Authorization Header is present

No comments:

Post a Comment