How to get data in react with API fetch call

Question

Basically I am trying to find a way how the fetch data works. I have created a method that returns a simple list and the response of the body is as follow:

[
  {
    "Name": "ApooBG",
    "Password": "e062f192A",
    "Email": "idk@abv.bg"
  },
  {
    "Name": "VenszBG",
    "Password": "12645",
    "Email": "idkk2@abv.bg"
  },
  {
    "Name": "PetarGH",
    "Password": "1245",
    "Email": "idkk3@abv.bg"
  }
]

then I have in react a button that calls a method, where it should get this list.

<div> <button onClick={Testing}>Edit Info</button></div>

    const Testing = () => {
        fetch("https://localhost:7101/GetUsers")
        .then((response) => response.json())
        .then((data) => {
            console.log(data);
        })
    };

When I try to click on the button I need to get the users in the console.log but instead I get:

Could you tell me what I am doing wrong as I really don't get the idea. The URL should be okay as this is what the request URL is. Therefore, the problem should be somewhere else.

You have an unhandled rejection, maybe on the back end, maybe on the front end. You could add `.catch((error) => { console.log(error); })` after the last `.then()` and see what that says, might help you diagnose it a little bit — Liam Kenny, Nov 17 '22 at 11:11
Do you get the correct response when you just visit your API URL in another tab? — Finn, Nov 17 '22 at 11:11
Yes, I get the correct response. And here is the error that I get: https://pastebin.com/8iGG46qB — Venoz, Nov 17 '22 at 11:17

Opay Hero · Answer 1 · 2022-11-17T12:31:16.710

I don't know if it will help, how about testing with dummy API first available online? Here one of open API example that can be used:

const Example = ({title}) => {
    
    const Testing = () => {
        fetch("https://dummyjson.com/users/1")
        .then((response) => response.json())
        .then((data) => {
            console.log(data);
        })
    };
  
    return (
        <div>
            <p>{title}</p>
            <button onClick={Testing}> Edit Info</button>
        </div>
    );
};

// Render it
ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <Example title="Example:" />
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

If this work, try to check your backend port and proxy setting. Maybe this one will help https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-react?view=vs-2022

Yes, it does get the information in the console. Basically, the problem is in the backend. Unfortunately, I don't understand where, is it the CORS error or something else? The mentioned link doesn't help me much as I am really lost somewhere in between — Venoz, Nov 17 '22 at 12:55
https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-7.0 sorry for late response. You can check this out @Venoz — Opay Hero, Nov 25 '22 at 09:05

score 0 · Accepted Answer · answered Nov 17 '22 at 12:45

0

I just check the log. TypeError: Failed to fetch might occurs when the API Cross-Origin Resource Sharing (CORS) errors happen. Check out this answer https://stackoverflow.com/a/49895164/10766263

answered Nov 17 '22 at 12:45

Opay Hero

53
6

How to get data in react with API fetch call

2 Answers2