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, Sep 23 '19 at 22:31

score 1 · Accepted Answer · answered Sep 24 '19 at 08:06

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.

score 1 · Answer 2 · answered Oct 09 '19 at 09:17

1

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

answered Oct 09 '19 at 09:17

Yuvaraj Ravi

21
1
3

could you please explain – Pooja Rajendran C Jan 11 '21 at 07:40

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

2 Answers2