Question

我正在使用react-native 0.50.3向我的后端发送令牌认证请求，遗憾的是，fetch不会发送标头的“授权”部分。

我的代码如下：

async componentDidMount() {

    var mytoken = await AsyncStorage.getItem('token');
    fetch('http://myserver:8000/home', {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Origin': '',
        'Content-Type': 'application/json',
        'authorization': 'Bearer ' + mytoken
      }
    })
    .then((response) => response.json())
    .then((content) => {
      this.state.user = content.user;
    })
    .done();
}

在我的服务器端，wireshark跟踪显示授权不在请求标头中：

Hypertext Transfer Protocol
    GET /home/ HTTP/1.1\r\n
    Host: 10.150.21.124:8000\r\n
    Content-Type: application/json\r\n
    Origin: \r\n
    Accept: application/json\r\n
    User-Agent: Expo/2.3.0.1012011 CFNetwork/893.14 Darwin/17.3.0\r\n
    Accept-Language: en-us\r\n
    Accept-Encoding: gzip, deflate\r\n
    Connection: keep-alive\r\n
    \r\n
    [Full request URI: http://10.150.21.124:8000/home/]
    [HTTP request 1/1]
    [Response in frame: 2326]

当然，我的服务器没有受到401的控制。

我的后端是安装了CORS的django API，CORS_ORIGIN_ALLOW_ALL = True和ALLOWED_HOSTS = ['*']。

我的开发框架元素的版本如下：

npm 4.6.1
node v9.3.0
react-native-cli 2.0.1

一个重要的更新，我尝试使用react-native的请求就像邮递员的魅力一样。所以问题不在服务器端。

感谢您的帮助。

亚历。

Answer 1

在URL地址中尝试用斜杠结尾：

fetch('http://myserver:8000/home/', {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Origin': '',
        'Content-Type': 'application/json',
        'authorization': 'Bearer ' + mytoken
      }
    })
    .then((response) => response.json())
    .then((content) => {
      this.state.user = content.user;
    })
    .done();

Answer 2

Pooya的答案通过在请求对象上添加斜杠对我有用。奇怪，因为它在邮递员上工作时没有尾随的斜线，因此在调试中面临挑战。 P.S我也使用相同的堆栈，django，django REST框架（DRF）反应本机

fetch('http://mywebsite.com/posts/', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer ' + token
  }
})

反应本机0.50.3授权标头未发送

2 个答案: