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

Posted 2023-02-22

【中文标题】如何在反应本机中使用 XMLHttpRequest 在 GET 方法的标头中传递授权令牌

【英文标题】：How to pass authorization token in header for GET method using XMLHttpRequest in react native

【发布时间】：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 的代码

我已经添加了我的代码。请看一看。

【参考方案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 将所有标题转换为小写。我们需要做不区分大小写的服务器端解析。

【讨论】：

你能解释一下吗