MacOs 和 iOs 上 Safari 的 React 和 Axios GET 请求问题

Posted 2023-02-22

【中文标题】MacOs 和 iOs 上 Safari 的 React 和 Axios GET 请求问题

【英文标题】：React and Axios GET request issue with Safari on MacOs and iOs

【发布时间】：2020-04-26 00:34:48

【问题描述】：

我正在尝试使用 Axios 进行 API 请求，它适用于所有 Windows 和 android 浏览器，但不适用于 MacOs Safari（但在 Chrome 中可以正常工作）或任何 iOs 浏览器。

在相同的代码中，我再次调用相同的 API（不同的端点），它在 safari 和 iO 中完全没有问题。

当我 console.log 抛出的异常结果是网络错误。

我认为这不是 CORS 问题，因为它适用于其他浏览器。

我的要求：

try 
  const response = await api.get(
    "/precos/get",
    
      headers: 
        'Content-Type': 'application/json'
        'token': getToken()
      
    
  );

  this.filtraProdutoPorTabela(response.data.data);
 catch (err)
  // do something with the error

控制台错误：

网络错误 "url":"http://url/precos/get","method":"get","headers":"Accept":"application/json, text/plain, /","this. state-Type":"application/json","token":"e…c","baseURL":"基本 url","transformRequest":[null],"transformResponse":[null],"timeout ":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"httpsAgent":

【问题讨论】：

this.state-Type 看起来不像 http 标头？

能否显示返回的网络错误？

我更改为 'Content-Type': 'application/json' 但发布保持不变。

返回错误的http状态是什么？ 404/300？

没有返回HTTP状态，错误发生在请求完成之前。至少没有回报。

【参考方案1】：

我能想到的唯一导致此问题的问题是，您肯定将计算机上的链接设置为例如：http://localhost:5000/api/posts

这很好用，因为您在同一台机器上执行此操作，但是当您在移动设备或任何其他设备上尝试时，当浏览器尝试访问该路由时，它会看到 url 的 localhost 部分并指向它自己不是你的实际机器。

要解决这个问题，您必须输入机器的 IP 地址和端口，而不是文字“localhost”。

来自： http://localhost:5000/api/posts

到： http://192.168.1.23:500/api/posts http:// 你的 IP 地址 :5000/api/posts