How to fetch data from different origin CORS?

Question

I'm trying to fetch data from a different origin to another server using Fetch API and I precise is from http to https

I can read the data from my browser but I don't know how to fetch them.

I already tried to set Access-Control-Allow-Origin to * but I still get this message :

console

I'm a little bit lost right know, Thank you for your support.

const myHeaders = new Headers({
  "Access-Control-Allow-Origin": "*",
  "Content-Type": "application/json"
});

const fetchConfig = {
  method: "GET",
  headers: myHeaders,
  mode: "cors",
  cache: "no-cache"
};

function fetchData(url) {

  fetch(url, fetchConfig)
    .then(response => {
      return response.json();
    })
    .then(data => {
      console.log(data);
    })
    .catch(error => console.error(error));

}

fetchData("https://api.example.com/");

I don't know if it's a problem of my browser, but I can't see the error image you posted. Can you paste the text please? — Andrea Binda, Aug 20 '19 at 12:20
did you try `console.log(response)` after `than` , what is the response you are getting ?? — Guruprasad, Aug 20 '19 at 12:21
Easy topic to research. Always try searching before asking. That error term alone will bring up many many results — charlietfl, Aug 20 '19 at 12:37

score 3 · Answer 1 · answered Aug 20 '19 at 12:21

3

The Access-Control-Allow-Origin header needs to be set by the server you are retrieving the data from, in response to your request.

answered Aug 20 '19 at 12:21

Chris Wheeler

1,623
1
11
18

score 1 · Answer 2 · answered Aug 20 '19 at 12:21

CORS Anywhere is a NodeJS proxy which adds CORS headers to the proxied request.

The URL to the proxy is literally taken from the path, validated and proxied. The protocol part of the proxied URI is optional, and defaults to "http". If port 443 is specified, the protocol defaults to "https".

This package does not put any restrictions on the http methods or headers, except for cookies. Requesting user credentials is disallowed. The app can be configured to require a header for proxying a request, for example, to avoid a direct visit from the browser.

You can simply add https://cors-anywhere.herokuapp.com/ at the beginning of your url. Like this https://cors-anywhere.herokuapp.com/http://example.com/api/....

Check this link for more details: https://www.npmjs.com/package/cors-anywhere

How to fetch data from different origin CORS?

2 Answers2