0

So I have made a React app that uses Axios to fetch api's. During development, I would have an api call to 127.0.0.1. However, my ReactApp resided on localhost:3000. Therefore, it development, I can't just use:

axios.get('/api/'),

In dev I would need to use:

axios.get('127.0.0.1/api/'),

Anybody have any good ideas on how to resolve this conflict so I can see some data in dev? Kinda tough to design an UI without any data to populate it. Kinda like buying a shirt without trying it on first (which, I never try anything on, so this is a horrible analogy.)

lakerskill
  • 1,019
  • 1
  • 11
  • 24
  • Could you give some more clarity on your issue? It seems like you are multiple factors affecting not being able to get the data. Did you try out your APIs using postman or any other API checker tools? – Arun T Sep 29 '18 at 05:36

1 Answers1

0

Use it as in the first example. Because it is relative, it will resolve fine for different hosts:

axios.get('/api')

Will automatically resolve to:

// if called by https://example.com/index.js for example
"https://example.com/api"

// if called by localhost/index.js
"https(s)://localhost/api"

In your second example, if you prepend the host and port, you will get duplication!

For example, I just tried your first example on my localhost:3000 and the result is

GET http://localhost:3000/api 404 (Not Found)

Which makes sense because I don't have a /api. But did you notice it appended /api correctly after my host and port?

Now your second example:

GET http://localhost:3000/127.0.0.1/api 404 (Not Found)

It duplicates the host and port. In your case it would be 127.0.0.1:3000/127.0.0.1/api

Just use the first example and it will resolve fine for different hosts (and ports) because it's relative! Did you try it out?

axm__
  • 2,463
  • 1
  • 18
  • 34
  • btw also notice: IF you want to use the absolute form (second example), you NEED to prepend it with http(s):// to get the correct absolute form like `axios.get('http://127.0.0.1/api')`. Else it will treat it like a relative url which will cause the duplication. – axm__ Sep 29 '18 at 09:35
  • I tried the first one Problem is this. Django (backend) runs on 127.0.0.1 and the React(frontend) runs on the localhost:3000. So there is no localhost:3000 api. And 127.0.0.1 doesnt actually serve any webpages. – lakerskill Sep 29 '18 at 16:32
  • `127.0.0.1` and `localhost` (in this context) is the same! (see: https://stackoverflow.com/questions/7382602/what-is-the-difference-between-127-0-0-1-and-localhost ) They are running one different ports. Then the question is: on which port is django running? is it `127.0.0.1:8000` (pretty common) ? because in that case you can access it through `http://127.0.0.1:8000/api` – axm__ Sep 29 '18 at 16:44
  • Yeah, I could do that, but the React can't run on the 8000 at the same time as Django, you need both running – lakerskill Sep 29 '18 at 17:46
  • In that case you can only solve it with a reverse proxy. Set your webserver (nginx?) up to forward calls to `/api/` to `http://localhost:3000` : google reverse proxying web server. locally, use a script to change the url. – axm__ Sep 29 '18 at 17:59