Question 174236 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – CORS blocking fetch

Im trying to do a fetch request to an open API: https://www.tenderned.nl/papi/tenderned-rs-tns/v2/publicaties/298340/documenten, but when i try this, i get the following error that CORS is blocking my fetch:

CORS blocking fetch

Ive already tried the following fixes found on the internet:

  1. Adding an Proxy to "https://www.tenderned.nl/" in package.json.
  2. Adding Origin and Allow headers header.

Hope someone can help me out. My code:

           fetch(
                `https://www.tenderned.nl/papi/tenderned-rs-tns/v2/publicaties/298340/documenten`,
                {
                    method: "GET",
                    headers: {
                        "Content-Type": "application/json",
                        "Access-Control-Allow-Origin": "*",
                        "Access-Control-Allow-Headers": "*",
                    },
                }
            )
                .then((response) => response.json())
                .then((result) => console.log(result))
                .catch((e) => console.log(e));
Tags:

2

Answers


  1. 0

    use this extension on google chrome

    https://chrome.google.com/webstore/detail/moesif-origin-cors-change/digfbfaphojjndkpccljibejjbppifbc?hl=en-GB
    Login or Signup to reply.
  2. 0

    Cross Origin Resource Sharing (CORS) issue occurs when a web application running in one domain and tries to make request from different domain.
    To resolve the CORS issue – try to make REST API call from your own backend server. You can implement server side CORS handling. Below are steps.

    1. Make a REST API call from your own backend server.
    2. Install nmp packages for CORS if its not there. "npm install cors"
    3. Write a sample code to handle CORS between front end and Backend over server.ts file.
    4. Write CORS handling code here in server.ts file as example
      app.use(cors({
      origin : [‘Your Front end URI’],
      credentials : true,
      }))
    5. Write a end point at your backend to call your API – FOR your mentioned API in Question.
    6. Update your front end code with newly created end point at server side – example is http://localhost:5000/getdata

    There are other two ways to fix this issue as well, However that will not work here

    1. To make REST call from Same domain only.
    2. Edit CORS setting of https://www.tenderned.nl server.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search