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 pared 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"

ponentDidMount () {
  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

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 pared 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"

ponentDidMount () {
  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

• javascript
• reactjs
• react-native

• Maybe try console.log your new Header() to see if it returns what you expect? Else, using a plain key-value object for your header should be fine, as state in the docs, or this docs – wicky Commented Mar 1, 2019 at 3:42
• I tried with plain static key also but no luck. – Kurkula Commented Mar 1, 2019 at 5:07
• Try tracing the header of your fiddler request too, cause not all api takes "Bearer " as the prefix for auth – wicky Commented Mar 1, 2019 at 5:16
• 1 Different framework takes different Auth header. For example, Django REST Framework takes "Token " as the prefix. You should look for what prefix your framework is using – wicky Commented Mar 2, 2019 at 8:21
• 1 Did you try with adding credentials:include in req?? ** fetch(url, { mode: "cors", // no-cors, cors, *same-origin credentials: "include", // include, *same-origin, omit ** – Nithin CV Commented Mar 4, 2019 at 2:28

5 Answers 5

Try to check the API in Postman. That will show detailed request and response to you.

A Headers object also has an associated guard, which takes a value of immutable. Why did you use POST without body? Edit your fetch function like:

fetch(url, {
   method: 'POST',
   crossDomain: true,
   mode: 'no-cors',
   body: JSON.stringify({// you data here})
   headers: {
     'Authorization': 'Bearer ' + 'token generated from fiddler after running auth',
     'Accept': 'application/json',
     'Content-Type': 'application/json'
   }
})
  .then(response => response.json())
  .then(responseJson => {
   // do somethign here...
   }

First of all i didnt't find what is the option "crossDomain" mean, official documentation does not contain such option. Secon - i'd try to make such auth request to the local test server and check if all necessary data included, additionally it can be checked in the network tab of the devTools. When you will see what's wrong with request you can make next steps to do at first a simple auth request without additional options.

When you need use CORS, while your domains point same server and allow headers in server and authorization sign is all alright, but you make a request out server domain, you need a proxy CORS, if you and make request like to

axios.get(${'https://cors-anywhere.herokuapp./'}https://a.4cdn/a/threads.json) .then(res => { console.log(res) })

I tried navigating to azure portal, Opened my registered application, settings and under platform features/cors, I removed all urls and added *. This added authorization header for me. Adding * for cors is not remended, but to test application on my localhost I tried this option. Once application is deployed, I removed * from cors allowed sites list and added my real site url there.

I came to this conclusion by using fiddler and postman side by side.