Reactjs没有授权标题存在

Question

我正在尝试使用reactj从我的API调用中返回JSON数据。1.我尝试在提琴手上使用有效的携带者令牌运行URL，这给了我正确的结果。2.我尝试在下面的调用中使用相同的URL，并在React Code中使用了相同的提琴手生成的携带者令牌。

它抛出401个未经授权的错误。

i比较了标签Auth下的点1和第2点提琴手请求。一个人具有正确的载体令牌，但第二个即将代码说"不存在授权标题"。我正在以React代码发送令牌，但为什么说"没有授权标题"

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

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

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.我创建了一个标头对象标头：新标头（{'content-type'：'application/json'}），如下所示2.我不使用同构提取，如下所示

Answer 1

尝试检查邮递员中的API。这将向您显示详细的请求和响应。

Answer 2

a Headers对象也具有关联的后卫，它具有不变的值。您为什么使用没有身体的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"的意思，官方文档不包含这种选项。SECON-我会尝试向本地测试服务器提出此类验证请求，并检查是否包括所有必要数据，还可以在DevTools的"网络"选项卡中进行检查。当您看到请求出了什么问题时，您可以在没有其他选项的情况下首先做出下一步的步骤。

Answer 4

当您需要使用CORS时，当您的域指向相同的服务器并允许服务器中的标头和授权符号的标题还不错，但是您将请求输出服务器域，您需要一个代理CORS，如果您并提出要求

axios.get(${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json) .then(res => { console.log(res) })

Answer 5

我尝试导航到Azure Portal，打开了我的注册应用程序，设置和平台功能/CORS，我删除了所有URL并添加了 *。这为我增加了授权标题。不建议添加 *用于CORS，但要在我的Localhost上测试应用程序，我尝试了此选项。部署应用程序后，我从允许的站点列表中删除 * *

我通过并排使用提琴手和邮递员得出了这个结论。