How to pass authorization token in header for GET method using XMLHttpRequest in react native

Question

I am new to react-native. I am trying to pass the authorization token through a header in the GET method. But I am getting an unauthorized error.

I have already tried this code "Using an authorization header with Fetch in React Native" not working for me and also with XMLHttpRequest()

But the API works fine in postman, Java(core) and Android.

Do we have any special implementation in react-native to pass headers? Could anyone can help me with this?

My code: Changed the server name.

getData() {
    var data = null;

    var xhr = new XMLHttpRequest();
    xhr.withCredentials = true;


    xhr.addEventListener("readystatechange", function () {
      if (this.readyState === 4) {
        console.log(this.responseText);
      }
    });

    xhr.open("GET", "https://xyz-test-server.server.com/api/v3/users/details/");
    xhr.setRequestHeader("Authorization", "Basic cC5qYWltdXJ1Z2FuLm1jYUBnbWFpbC5jb206MTIzNDU2");
    xhr.setRequestHeader("User-Agent", "PostmanRuntime/7.17.1");
    xhr.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded; charset=ISO-8859-1");
    xhr.setRequestHeader("Accept", "*/*");
    xhr.setRequestHeader("Cache-Control", "no-cache");
    xhr.setRequestHeader("Postman-Token", "d8ae56bf-1926-44e4-9e94-23223234,93a110a2-ee8e-42d5-9f7b-45645ddsfg45");
    xhr.setRequestHeader("Accept-Encoding", "gzip, deflate");
    xhr.setRequestHeader("Connection", "keep-alive");
    xhr.setRequestHeader("cache-control", "no-cache");

    xhr.send(data);
}

Fetch method:

async _getProtectedQuote() {
  fetch('https://xyz-test-server.server.com/api/v3/users/details/', { 
    method: 'GET', 
    headers: new Headers({
      'Authorization': 'Basic cC5qYWltdXJ1Z2FuLm1jYUBnbWFpbC5jb206MTIzNDU2', 
      'Content-Type': 'application/x-www-form-urlencoded'
    }), 
  }).then(responseJson => {
    alert(JSON.stringify(responseJson));
    console.log(responseJson);

  });
}

Please post the code you tried using both the Fetch API as well as XMLHttpRequest — Ntokozo Zwane
– Ntokozo Zwane, Commented Sep 23, 2019 at 22:31

Raj Gohel · Accepted Answer · 2019-09-24 08:06:29Z

You can try interceptor for pass token into header.

Put all requests in one service file name service.js then import Interceptor from '../interceptor'; make one interceptor.js file and write below code in file.

import axios from 'axios';

axios.interceptors.request.use(async (config) => {

if (config.method !== 'OPTIONS') {

        config.headers.Authorization = 'Basic cC5qYWltdXJ1Z2FuLm1jYUBnbWFpbC5jb206MTIzNDU2';

    }

    return config;

}, function (error) {

// Do something with request error 

console.log('how are you error: ', error);

return promise.reject(error);

});

axios.interceptors.response.use(

(response) => {

    return response

},

async (error) => {

    // const originalRequest = error.config

    console.log("error in interceptors=============>", error);

    if (error.response.status === 500) {

        alert(error.response.data.message);

        NavigationService.navigate('Login');

    } else {

        return Promise.reject(error)

        }
    }
)

export default axios;

When api calls header will pass through by interceptor automatically.

Yuvaraj Ravi · Accepted Answer · 2019-10-09 09:17:31Z

1

Fetch Api converts all headers into lower-case. We need to do case-insensitive server side parsing.

answered Oct 9, 2019 at 9:17

Yuvaraj Ravi

311 silver badge4 bronze badges

1 Comment

Pooja Rajendran C Over a year ago

could you please explain

Collectives™ on Stack Overflow

How to pass authorization token in header for GET method using XMLHttpRequest in react native

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related