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

const getData = () => {
    Axios.get("http://localhost:3000/security?select=symbol,pany",
    {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

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.

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

const getData = () => {
    Axios.get("http://localhost:3000/security?select=symbol,pany",
    {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

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.

• javascript
• reactjs
• nginx
• axios
• postgrest

• 4 Is your React application on port 3000? Perhaps your API and React application is conflicting? – AviatingFotographer Commented Jan 4, 2021 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 Commented Jan 4, 2021 at 21:40
• 1 @Dre are you sure there is something running on that port? what does the output of curl to the above URL say? – r3wt Commented Jan 4, 2021 at 21:42
• 1 do you use wifi for React calls? – Gurgen Sargsyan Commented Jan 4, 2021 at 21:53
• 1 Can you try with 127.0.0.1 instead of localhost? – Gurgen Sargsyan Commented Jan 4, 2021 at 22:04

2 Answers 2

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

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./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.