Axios api doesn't receive call when called from reactjs

Question

I have a working Rest API written with axios. When I run the API and make a call through a regular script everything works as expected. When I make the same call from a react project, the call doesn't reach the API and the client gets and error.

The react call works fine if use an external API like https://jsonplaceholder.typicode.com/todos/1

The call from a script:

import api from 'api'

api.get('/test')
.then(response => {console.log(response.data.msg)})  // Prints out a message
.catch(e => {console.log(e)})

The call from the react project:

import Form from "react-bootstrap/Form";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";
import Button from "react-bootstrap/Button";
import api from 'api'

const Workout = (props: any) => {

    const handleSave = (e: any) => {
        e.preventDefault();

        console.log('Calling API')  // This is printed so I know the code runs

        api.get('/test')
        .then(response => {console.log(response.data.msg)})
        .catch(e => {console.log(e)}) // Prints out an error
    };


    return (
        <tr>
            <td colSpan={4}>
                <Form onSubmit={handleSave}>
                    <Form.Group>
                        <Row>
                            <Col>
                                <Button
                                    variant="primary"
                                    type="submit"
                                    onClick={handleSave}
                                >
                                    Test
                                </Button>
                            </Col>


                            <Col></Col>
                            <Col></Col>
                            <Col></Col>
                        </Row>
                    </Form.Group>
                </Form>
            </td>
        </tr>
    );
};

The api file:

import axios from 'axios'

const api = axios.create({
    baseURL: `/myApi`,
    proxy: {
        host: '127.0.0.1',
        port: 4000
    }
})

export default api

When I click the button I see Calling API in the console and then this error:

Error: Request failed with status code 404
    at createError (createError.js:17)
    at settle (settle.js:19)
    at XMLHttpRequest.handleLoad (xhr.js:60)

Where is the API running? There has to be a server somewhere for your React client application to send requests to. Axios is just a client to send requests, it can't actually receive them or deploy a server that can. — Chris B.
– Chris B., Commented Sep 10, 2019 at 19:13
@RutherfordWonkingtonThe server is running locally with express on port 3000 — Koby 27
– Koby 27, Commented Sep 10, 2019 at 19:23
404 means you don't have the access to the resource you are requesting because it might not exist, check if the baseURL is correct and your resource exists. — Rohit Kashyap
– Rohit Kashyap, Commented Sep 10, 2019 at 19:35
@RohitKashyap I checked. I'm pretty sure the problem is related to the fact I'm sending the request from a react project. I think that because when I try to access the API from a regular script (as I wrote in the question) I get the response I expected. — Koby 27
– Koby 27, Commented Sep 10, 2019 at 19:40

Jake Luby · Accepted Answer · 2019-09-10 23:17:36Z

1

To make this work while in development add "proxy": "http://localhost:4000" to your package.json. That will proxy the request from the port it's running on to port 4000 where the API is

Here are the react docs on proxying requests and why the solution works: https://create-react-app.dev/docs/proxying-api-requests-in-development

edited Sep 10, 2019 at 23:17

answered Sep 10, 2019 at 19:40

Jake Luby

1,7687 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Koby 27 Over a year ago

The react project is on port 4000 and the API is on 3000 so I set "proxy": "http://localhost:4000" and It worked! Could you explain why this works?

Collectives™ on Stack Overflow

Axios api doesn't receive call when called from reactjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related