Question

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

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

我在标签AUTH下比较了第1点和第2点的提琴手请求。一个具有正确的承载令牌，但是第二个，即反应代码说“不存在授权头”。我正在以响应代码发送Token，但为什么它显示“不存在授权标头”

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.我创建了一个标头对象标头：new Headers（{'content-type'：'application / json'}），如here所述 2.我没有使用here

中所述的同构提取

Answer 1

尝试检查Postman中的API。这将显示详细的请求和对您的答复。

Answer 2

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”选项的含义，official documentation不包含此类选项。 Secon-我将尝试向本地测试服务器发出这样的身份验证请求，并检查是否包含所有必需的数据，此外，可以在devTools的网络标签中进行检查。当您发现请求出了什么问题时，您可以首先进行简单的身份验证请求，而无需其他选项即可进行下一步操作。

Answer 4

当您需要使用CORS时，虽然您的域指向同一服务器并允许服务器中包含标头，并且授权符号也可以，但是您向服务器域发出请求时，需要代理CORS（如果您这样做并希望这样做）< / p>

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

Answer 5

我尝试导航到azure门户，打开我的注册应用程序，设置，并在平台功能/核心下，删除了所有URL，并添加了*。这为我添加了授权标头。不建议为cors添加*，但是要在我的本地主机上测试应用程序，我尝试了此选项。部署应用程序后，我从允许访问的网站列表中删除了*，并在其中添加了真实的网站网址。

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

ReactJs没有授权头

5 个答案: