How to resolve get request with axios in React?

Question

I'm new to Axios, and I was trying to fetch data from an endpoint to use in React...

import axios from "axios";

const api = axios.create({ baseURL: "http://localhost:5000/" });

export default function App() {
  api.get("/products").then(res => console.log(res.data));
  ...
}

Here is my endpoint code...

const express = require("express");
const app = express();

require("dotenv").config();

app.get("/products", (req, res) => {
  res.send("Hello world!");
});

const port = process.env.PORT;
app.listen(port, () => console.log(`Listening on port ${port}...`));

But instead of the Hello world! getting logged I am getting this error...

Any help would be appreciated.

Daphaz · Accepted Answer · 2021-04-28 13:04:36Z

1

Hi look for this lib Cors for express and you can use proxy in react project in your package.json instead of axios.create() like

"proxy": "http://localhost:5000"

answered Apr 28, 2021 at 13:04

Daphaz

5164 silver badges7 bronze badges

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

1 Comment

user14339485 Over a year ago

Thanks for replying. But I'm going to accept the other answer because it showed me how to set up cors.

krsna · Accepted Answer · 2021-04-28 14:10:10Z

0

Install cors middleware in your backend server.

npm install cors
Enable all CORS requests

const express = require("express");
var cors = require('cors')
const app = express();

app.use(cors())

You can look for more information here. There are ways to configure your CORS as well.

To your another question, CRUD operations should be used in useEffect hook.

import React, { useEffect } from 'react';

export default function App() {

  useEffect(() => {

    api.get("/products").then(res => console.log(res.data));

  }, [])

  ...
}

edited Apr 28, 2021 at 14:10

answered Apr 28, 2021 at 13:08

krsna

4,3437 gold badges61 silver badges107 bronze badges

4 Comments

user14339485 Over a year ago

But can you provide why my code doesn't work and what cors is?

user14339485 Over a year ago

Also hello world is getting logged two times.

krsna Over a year ago

@EthanLal You will have to use useEffect hook in order to make any side effect. Meaning, any CURD requests should go in useEffect hook, that way you will not have re rendering effects.

krsna Over a year ago

I'm going to edit my answer to reflect the useEffect hook usage.

Collectives™ on Stack Overflow

How to resolve get request with axios in React?

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related