在 REACT 中，GET http:/xxxx 401 (Unauthorized)/ (CORS) : For "localhost"

Question

尝试使用axios.getmethod 调用以下API。我使用Moesif CORS google 扩展绕过了CORS。
API 需要令牌才能使用 POSTMAN 提取结果。

插入有效令牌：尽管启用了 CORS 扩展，但出现 CORS 错误。
CORS Error
没有令牌：在启用 CORS 扩展名的情况下获得 401 Unauthorized。
401 Unauthorized

我有点困惑，这是我的令牌未经授权的问题还是这里的 CORS 问题？有人可以建议吗？但是，如果我调用不需要令牌的其他 API，我可以在启用 CORS 扩展时获得结果，而不会出现任何问题。

在这里分享我的示例代码：

const tokenStr = 'abc1234'; // example
const config = {
  headers: { Authorization: `Bearer ${tokenStr}` }
};

let dcqoapi = 
"http://quote.dellsvc/v3/quotes?number=" + Quote + "&version=" + Version;

  const calldcqoapi = () => { //assign a variable for a call function
        Axios.get (dcqoapi,config).then(
          (response) => {
          console.log(response);
        })

  };

Answer 1

您需要更科学地跟踪 HTTP 响应 - 使用浏览器工具或 Charles 代理等工具。请记住，API 有时实现不佳，并且无法正确返回 CORS 标头。

有关方法，请参阅Step 15 of my blog post。在所有这些情况下，您是否都获得了对浏览器工作的响应标头？

• 在没有访问令牌的情况下调用 API
• 使用无效的访问令牌调用 API
• 使用有效的访问令牌调用 API

Answer 2

已通过禁用 Chrome 的网络安全解决了该问题。以下是我采取的以下措施：[WORKS FOR LOCALHOST]

1. 在您的桌面上创建一个快捷方式。
2. 右键单击快捷方式，然后单击属性。
3. 编辑目标属性。
4. 将其设置为“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” --disable-web-security --user-data-dir="C:/ChromeDevSession"
5. 打开 Google chrome（您应该会在页面顶部看到消息“disable-web-security”）
6. 运行您的应用程序
7. 复制您的 localhost URL 并将其粘贴到 Chrome
8. 现在可以完美地使用标头令牌调用 API。

通过执行上述步骤，我们完全绕过了包括 CORS 在内的所有安全措施。因此，不再需要Moesift CORS。
因为我正在使用 POSTMAN 通过Headers 调用 API。
对我的代码进行了一些小改动，而不是放置“Bearer”，我已将其删除。
'bearer' 用于授权。 标头不考虑不记名令牌，它只是一个密钥，因此我们不应该为 POSTMAN headers 输入“不记名”。

let config = {

  headers: { Authorization: 'PlACE YOUR TOKENS HERE'}

};

let dcqoapi =
"https://quote.dellsvc/v3/quotes?number="+ Quote +"&version=" + Version // set DCQO API

const calldcqoapi = () => { //assign a variable for a call function
    Axios.get (dcqoapi,config).then(
      (response) => {
      console.log(response);
})

};