Failed to fetch - No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

I am attempting to use React to display a list of events from an API.

Here is the EventList.js file.

Here is how I am attempting to render the Event List API on the Events page.

This is the error I keep getting.

I have tried signing in to the API through the login interface and then fetching the URL but, I still get this error. When I go to the API I can see all of the events returned but, when I run the browser the Information does not display.

This is the JSON that should be returned from Swagger UI.

Answer 1

Changing the fetchEvents function to this worked for me!

fetchEvents = () => {

    const proxyurl = "https://secret-ocean-49799.herokuapp.com/";
    const url = SERVER_URL + '/api/v1/event';

    fetch(proxyurl + url)
        .then((resp) => resp.json())
        .then((data) => {
            this.setState({
                data: data.data
            });
            console.log(data);
        })
        .catch((error) => {
            console.log(error);
        });
}