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

Question

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

插入有效令牌：尽管 CORS 扩展已启用，但出现 CORS 错误。
CORS Error
没有令牌：同时启用 401 Unauthorized with CORS 扩展。
401 Unauthorized

我有点疑惑，是我的token未授权问题还是这里的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 有时实施不当，并且 return CORS headers 不正确。

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

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

Answer 2

问题已通过从 Chrome 禁用网络安全得到解决。以下是我采取的以下操作：[为本地主机工作]

在桌面上创建快捷方式。
Right-click 在快捷方式上，然后单击“属性”。
编辑目标属性。
设置为“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” --disable-web-security --user-data-dir="C:/ChromeDevSession “
打开 Google chrome（您应该会在页面顶部看到消息“disable-web-security”）
运行你的应用程序
复制您的本地主机 URL 并将其粘贴到 Chrome
现在使用 headers 标记调用 API 非常完美。

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

输入 'bearer'

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

};

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

In REACT, GET http:/xxxx 401 (Unauthorized)/ (CORS) : For "localhost"

request-headers

cors

access-token

reactjs