2

Mine react apps fetch requests work fine when I test in dev environment (npm start) but after creating a build package (npm run build) and then running that, all my fetch requests receive a failed status when making requests to my locally hosted API. Could this be because my API is not https? Any other ideas?

Thanks

6
  • 2
    do you have any more info on the failed request? What's the error code? Does the error return any messages? There should be some info in the chrome dev tools network tab Jun 5, 2020 at 1:46
  • there is no error code. it only says '(failed)net::ERR_CONNECTION_REFUSED ' on the first time i make a request and subsequent attempts just say (failed)
    – Tamjid
    Jun 5, 2020 at 4:35
  • Did you try putting your API behind https using something like ngrok ?
    – LoXatoR
    Feb 16, 2022 at 17:38
  • 2
    Please post an example fetch along with a screenshot of the Developer tools' Network tab, with the fetch selected.
    – Nice Books
    Feb 20, 2022 at 18:26
  • I thing you are using proxy for test environment and your prod environment url doesnt match with your hosted url Feb 21, 2022 at 12:15

2 Answers 2

1

Double check if you have the REACT_APP_API_URL on your .env files:

  • .env (it should be localhost)
  • .env.production (this is used on build, it should be production URL)
6
  • what if i'm building my url something like this: let api_url = process.env.NODE_ENV === 'production' ? /api/urls/?user=${loginData.email}` : http://localhost:8000/api/urls/?user=${loginData.email};`
    – suraj
    Feb 21, 2022 at 13:05
  • Can you perform a test and tell us where are you pointing the HTTP request on developer console → network tab?
    – Icaruk
    Feb 21, 2022 at 22:57
  • puu.sh/IKKlR/1f9d53ce39.png @icaruk
    – suraj
    Feb 22, 2022 at 8:49
  • You are pointing to localhost:8000 so the problem is located at the environment file or the function you are using to choose environment. Try to hardcode the production URL, build and test.
    – Icaruk
    Feb 23, 2022 at 11:13
  • i did hardcode the url but it didnt work
    – suraj
    Feb 23, 2022 at 11:26
0

Try adding a proxy field in the package.json of your react app. Once that is in place, run build and test. This usually solves the api issue that react can have with api.

package.json: proxy: "http://localhost:8000"

requests in React app: fetch('/api/urls/....')

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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