4

I'm trying to get this API call to work using axios:

const getData = () => {
    Axios.get("http://localhost:3000/security?select=symbol,company",
    {headers: {Authorization: 'Bearer 73Ntx3b6SwNXC7ANV3tw4wFfDdKntB26',
                "Access-Control-Allow-Origin": "*",
                mode: "cors",               
    }}
    ).then((response) => {
        console.log(response)
    })
}

My local API server is up and running, I can make requests using curl and see JSON data. However, the calls do not work when I implement a GET request in my React App.

I'm a little curious to know why I'm getting these errors:

Failed to load resource: net::ERR_CONNECTION_REFUSED
createError.js:16 Uncaught (in promise) Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:84)
createError @ createError.js:16
handleError @ xhr.js:84

Something is blocking the API from showing the data, I assume it's React. In my stack, this connection to localhost:3000 API is only used once in the code above, it simply retrieves unique data...

Any ideas on how to solve?

EDIT: I have added a picture to show that the port is up and my API is up enter image description here

EDIT EDIT: So I tested my API live in production to see if it was a backend issue, I can access my API live from a real web-address. No issue there. I guess I tinkered my backend closer to getting the API request to work with React, because now I'm getting an 401 unauthorized Request instead of my previous error.

Here is the config file for my nginx backend for my api url:

    location /data/ {
      default_type  application/json;
      proxy_hide_header Content-Location;
      add_header Content-Location  /data/$upstream_http_content_location;
      add_header Access-Control-Allow-Origin *;
      proxy_set_header  Connection "";
      proxy_http_version 1.1;
      proxy_pass http://localhost:3000/;
        }
}

I have also added new code for my REACT get request above.

andres
  • 1,558
  • 7
  • 24
  • 62
  • 4
    Is your React application on port 3000? Perhaps your API and React application is conflicting? – AviatingFotographer Jan 04 '21 at 21:39
  • 1
    if connection is refused, the port isn't open. therefore the api isn't running you are trying to connect to. – r3wt Jan 04 '21 at 21:40
  • To answer both of your questions, I switched the React port to a different number. The port must be open because I can write curl requests in my terminal from `localhost:3000` – andres Jan 04 '21 at 21:41
  • 1
    @Dre are you sure there is something running on that port? what does the output of curl to the above URL say? – r3wt Jan 04 '21 at 21:42
  • @r3wt, please see my edit in my OG post. I have added a picture to help understand the problem better. – andres Jan 04 '21 at 21:45
  • 1
    do you use wifi for React calls? – Gurgen Sargsyan Jan 04 '21 at 21:53
  • Hey @GurgenSargsyan, I do not use wifi for React calls. I have a pretty standard `create react app` frontend. – andres Jan 04 '21 at 21:55
  • 1
    Can you try with 127.0.0.1 instead of localhost? – Gurgen Sargsyan Jan 04 '21 at 22:04
  • @GurgenSargsyan, that sadly did not work. – andres Jan 04 '21 at 22:09
  • Did you bootstrap with CRA, might need to set a proxy: https://medium.com/bb-tutorials-and-thoughts/react-how-to-proxy-to-backend-server-5588a9e0347 – ContextCue Jan 04 '21 at 22:38
  • @ContextCue I saw that link before, but I'm just curious why I didn't need to do that for my other RESTful API. I even set up a proxy through `package.json` file, however that didn't seem to help the issue. – andres Jan 04 '21 at 23:57
  • Can you do -v in curl? I wonder if the headers got anything. Also, can you pipe curl output to json_pp or jq and see if they parse it properly? – pandamakes Jan 05 '21 at 00:11
  • Also, just a thought. Pretty print might be affecting it too. Maybe (at least) remove newline characters in the response? – pandamakes Jan 05 '21 at 00:13
  • I have added a new updated to my OG post. – andres Jan 05 '21 at 03:37
  • 1
    Which port is your nginx running on? I'm guessing it's not 3000, since it's proxy passing it to localhost:3000 ? – pandamakes Jan 05 '21 at 07:33
  • @pandamakes it's proxy passing localhost:3000 to be served through my web-domain. – andres Jan 05 '21 at 16:15
  • Perhaps you are listening only on 127.0.0.1 (IPv4 localhost) but the browser attempts to connect to ::1 (IPv6 localhost) or vice-versa? Try `http://127.0.0.1:3000` or `http://[::1]:3000` to see if either of these is the case. – CherryDT Jul 14 '23 at 22:15

2 Answers2

0

Try to set Axios baseURL: 'http://localhost:3000' and add option mode: "cors"

Gurgen Sargsyan
  • 1,087
  • 15
  • 22
0

Alright yo, well without knowing more about your setup, I have a basic example working with the proxy setup.

It is using

  • axios
  • CRA
  • express backend

https://github.com/ed42311/apiReactExample

It is missing the authentication part. I can keep building on it with some knowledge about how you setup the backend.

Feel free to use it as a talking point.

ContextCue
  • 323
  • 5
  • 14
  • Thank you for the comment, I have updated my post with a new error. – andres Jan 05 '21 at 03:36
  • ok, so now you are getting 401 unauthorized instead of what you are getting before, which just means you are unauthorized. How are you building the backend. How is your Authorization setup, express middleware? – ContextCue Jan 05 '21 at 04:16
  • I'm hosting my API on an NGINX server, I have added the configurations for the API on my new edit. – andres Jan 05 '21 at 05:52
  • I also do not have any express middleware set-up that I know of, unless there is a default in `create react app` – andres Jan 05 '21 at 05:59
  • hm... yeh that's cool. Middleware would go in your server, but it sounds like you are using https://postgrest.org/en/v7.0.0/ don't know much about that, but I would try a minimal python or nodejs server build to falsify that the problem is react/axios Besides that: https://stackoverflow.com/questions/40354551/pg4admin-401-unauthorized-error https://www.reddit.com/r/PostgreSQL/comments/asrpal/pg4admin_401_unauthorized_error/ Or... you might need to allow specific headers... just hypothesizing now... :D – ContextCue Jan 05 '21 at 16:56
  • At this point I’m sure it’s a backend error from the API, I have added the new method that I use to GET the request at the top of my OG post. Would appreciate some verification, if that looks fine then it’s my backend issue. – andres Jan 05 '21 at 18:14