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.

[Why not upload images of code/errors when asking a question?](https://meta.stackoverflow.com/q/285551) — VLAZ, Mar 12 '21 at 08:26
I think you missed the **not** in the title of that meta post. I recommend you to read the post, especially the Answer on it. Also see [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask), which apart from the bold text about images of code, also has some really good tips which will help you to avoid potential downvotes and closure of your post. — Scratte, Mar 15 '21 at 21:33

score 0 · Answer 1 · edited Mar 18 '21 at 19:14

You (or the one coding the API) should had your localhost in the CORS list. I see you are using Azure then it should be in this way:

Go to the WebApp Service in Azure.
Go to CORS (enable it if it's Off)
Add your address "https://localhost:44393" and all the one you will need.
And try again.

I use to had all of the addresses in my API codes too to prevent but then I still need to add them in Azure WebApp.

score 0 · Accepted Answer · answered Apr 29 '21 at 14:56

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);
        });
}

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

2 Answers2