CORS blocking fetch

Question

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:

Ive already tried the following fixes found on the internet:

Adding an Proxy to "https://www.tenderned.nl/" in package.json.
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));

If they have a documentation, please read it and hope you find a way to add your domain to their authorised domain list — Radika Dilanka, May 23 '23 at 11:03
CORS is a server-side directive that is respected by the browser. You must somehow work with the API server to have your domain added to the allowed origins. — possum, May 23 '23 at 11:34
Does this answer your question? [No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API](https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe) — jub0bs, May 23 '23 at 13:44

score -1 · Answer 1 · answered May 23 '23 at 10:59

-1

use this extension on google chrome

https://chrome.google.com/webstore/detail/moesif-origin-cors-change/digfbfaphojjndkpccljibejjbppifbc?hl=en-GB

answered May 23 '23 at 10:59

Araz

39
5

1

This will only work for your browser. I mean once you've published this method won't work on the client's browser unless the client is also having the same extension. – Radika Dilanka May 23 '23 at 11:05

score -1 · Answer 2 · edited May 23 '23 at 12:16

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.

Make a REST API call from your own backend server.
Install nmp packages for CORS if its not there. "npm install cors"
Write a sample code to handle CORS between front end and Backend over server.ts file.
Write CORS handling code here in server.ts file as example app.use(cors({ origin : ['Your Front end URI'], credentials : true, }))
Write a end point at your backend to call your API - FOR your mentioned API in Question.
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

To make REST call from Same domain only.
Edit CORS setting of https://www.tenderned.nl server.

CORS blocking fetch

2 Answers2