React and Axios GET request issue with Safari on MacOs and iOs - ios

Question

I'm trying to do an API request using Axios, it works in every windows' and Android browsers but does not work on MacOs Safari (but in Chrome it works fine) or any iOs browser.
In the same code I make another calls to the same API (different endpoints) and it works with no problems at all in safari and iOs.
When I console.log the throwed exception turns out that's a Network error.
I don't think that's a CORS issue, couse it works on another browsers.
My request:
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
}
Console error:
Network Error
{"url":"http://url/precos/get","method":"get","headers":{"Accept":"application/json, text/plain, /","this.state-Type":"application/json","token”:”e…c”},”baseURL”:”the base url ”,”transformRequest":[null],"transformResponse":[null],"timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"httpsAgent":{}}}

Answer 1

The only problem that would cause this that I can think of is that you for sure have the links on your computer set to for example: http://localhost:5000/api/posts
And that works fine since your doing it in the same machine but when you try it on your mobile devices or any other device when the browser tries to hit that route it sees the localhost portion of the url and it points to it self not your actual machine.
To solve this problem you have to put the ip address and the port of your machine not the literal text "localhost".
From:
http://localhost:5000/api/posts
To:
http://192.168.1.23:500/api/posts
http://{ YOUR IP ADDRESS }:5000/api/posts

Answer 2

When investigating this issue on my own I came across this post:
link not working in Safari.
For some reason on Safari link event is not being triggered. I had my onClick action, that was triggering axios call, bind to html <a /> tag. Safari was not letting axios execute request properly.
Adding:
event.preventDefault()
to function called by tag when clicked solved the issue.