Question

我是本机反应的新手。我试图通过GET方法中的标头传递授权令牌。但是我遇到了未经授权的错误。

我已经尝试使用此代码“ Using an authorization header with Fetch in React Native”不适用于我，并且也尝试使用XMLHttpRequest()

但是该API在邮递员，Java（核心）和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);

  });
}

Answer 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调用时，标头将被拦截器自动传递。

Answer 2

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

如何在React Native中使用XMLHttpRequest在GET方法的标头中传递授权令牌

2 个答案: