ReactJs没有Authorization头

Question

我正在尝试使用reactjs获取从api调用返回的json数据。1.我尝试在fiddler上使用有效的持有者令牌运行url，它给出了正确的结果。2.我尝试在下面的fetch调用中使用相同的url，并在react代码中使用相同的fiddler生成的承载令牌。

它抛出401未授权错误。

我比较了tab AUTH下的第1点和第2点的fiddler请求。一个有正确的持有者令牌，但第二个，即react代码显示“没有Authorization Header is present”。我在react代码中发送令牌，但是为什么它显示"No Authorization Header is present“？

componentDidMount () {
  const url = 'my reallyworking api url on fiddler';
  fetch(url
    , {
      method: 'POST',
      crossDomain: true,
      mode: 'no-cors',
      headers: new Headers({
        'Authorization': 'Bearer ' + 'token generated from fiddler after running auth',
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      })
    }
  )
    .then(res => res.json())
    .then(
      (result) => {
        alert('success');
        this.setState({
          isLoaded: true,
          gridData: result.items
        });
      },
      (error) => {
        this.setState({
          isLoaded: true,
          error
        });
      }
    );
}

Fiddler没有显示任何标题。下面是我的小提琴手跟踪

POST https://myurl HTTP/1.1
Host: myHost
Connection: keep-alive
Content-Length: 0
accept: application/json
Origin: https://localhost:xyz
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.119 Safari/537.36
Referer: https://localhost:xyz/testfetch
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9

注意: 1.我创建了一个headers对象headers: new Headers({'content-type'：‘here /json’})，正如here所解释的那样2.我没有使用与所解释的Headers同构的fetch

Answer 1

尝试检查Postman中的接口。这将向您显示详细的请求和响应。

Answer 2

Headers对象也有一个关联的防护，它的值是不可变的。为什么使用没有body的POST？编辑您的fetch函数，如下所示：

fetch(url, {
   method: 'POST',
   crossDomain: true,
   mode: 'no-cors',
   body: JSON.stringify({// you data here})
   headers: {
     'Authorization': 'Bearer ' + 'token generated from fiddler after running auth',
     'Accept': 'application/json',
     'Content-Type': 'application/json'
   }
})
  .then(response => response.json())
  .then(responseJson => {
   // do somethign here...
   }

Answer 3

首先，我没有找到选项"crossDomain“是什么意思，official documentation不包含这样的选项。Secon -我会尝试向本地测试服务器发出这样的身份验证请求，并检查是否包含所有必要的数据，此外，还可以在devTools的网络选项卡中进行检查。当您看到request出了什么问题时，您可以进行后续步骤，首先执行一个简单的auth请求，而不需要额外的选项。