7

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":{}}}

9
  • this.state-Type doesn't look like an http header? Jan 8, 2020 at 14:32
  • May you show the network error that is returned? Jan 8, 2020 at 14:51
  • I changed to 'Content-Type': 'application/json' but issued stayed the same. Jan 8, 2020 at 15:10
  • What is the http status of the returned error? 404/300? Jan 8, 2020 at 15:41
  • There's no HTTP status returned, the error occurs before the request finish. At least there are no returns. Jan 8, 2020 at 16:29

2 Answers 2

0

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

0

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.

1
  • As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Sep 4, 2022 at 16:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.