如何在反应本机中使用 XMLHttpRequest 在 GET 方法的标头中传递授权令牌答案

【问题标题】：How to pass authorization token in header for GET method using XMLHttpRequest in react native如何在反应本机中使用 XMLHttpRequest 在 GET 方法的标头中传递授权令牌
【发布时间】：2020-01-23 15:10:15
【问题描述】：

我是 react-native 的新手。我正在尝试通过 GET 方法中的标头传递授权令牌。但我收到了未经授权的错误。

我已经尝试过这段代码“Using an authorization header with Fetch in React Native”不适合我，也不适用于XMLHttpRequest()

但该 API 在 postman、Java(core) 和 Android 中运行良好。

我们在 react-native 中是否有任何特殊的实现来传递标头？谁能帮我解决这个问题？

我的代码：更改了服务器名称。

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);
}

获取方法：

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);

  });
}

【问题讨论】：

给我看你试过的代码。
请发布您尝试使用 Fetch API 和 XMLHttpRequest 的代码
我已经添加了我的代码。请看一看。

标签： react-native

【解决方案1】：

您可以尝试拦截器将令牌传递到标头中。

将所有请求放在一个服务文件名service.js 然后import Interceptor from '../interceptor'; 创建一个interceptor.js 文件并在文件中写入以下代码。

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;

当api调用header时，拦截器会自动通过。

【讨论】：

【解决方案2】：

Fetch Api 将所有标题转换为小写。我们需要做不区分大小写的服务器端解析。

【讨论】：

你能解释一下吗