testing fetch API with JSFiddle - CORS errors [duplicate]

Question

I am using JSFiddle to make some tests with the fetch API, but I am getting CORS origin block everytime.

Is there a way to bypass it? The server I am fetching is localhost, should I do something to accept requests by JSFiddle or is there an easier way to do it witout touching my server configuration?

Here is an example:

async function getText(url) {
  try{
    var response = await fetch(url);
    var txt = await response.text();
    return txt;
  }
  catch(e){
    console.log('there was an error');
    console.log(e); 
  }
}

alert(getText('https://www.vim.org/git.php'));

guettli · Accepted Answer · 2020-12-15 08:28:22Z

5

Yes there is a way - you need to allow CORS on SERVER

Another approach: If you cannot allow CORS on third-party server, you can write your own CORS-ON-SERVER (proxy) which will connect with third-party server and send/receive data from it.

Third approach: You can use some existing cors-proxy server like this and use it for example - change line:

alert(getText('https://www.vim.org/git.php'));

to

async function run() {
  let result = await getText('https://cors-anywhere.herokuapp.com/https://www.vim.org/git.php');
  alert(result);
}

run();

async function getText(url) {
  try{
    var response = await fetch(url);
    var txt = await response.text();
    return txt;
  }
  catch(e){
    console.log('there was an error');
    console.log(e); 
  }
}

async function run() {
  let result = await getText('https://cors-anywhere.herokuapp.com/https://www.vim.org/git.php');
  document.body.innerHTML=result;
  //  alert(result);
}

run();

wait...

edited Dec 15, 2020 at 8:28

guettli

27.7k109 gold badges423 silver badges779 bronze badges

answered May 14, 2018 at 11:12

Kamil Kiełczewski

93.7k34 gold badges401 silver badges375 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

umbe1987 Over a year ago

Thanks, just what I was looking for.

Kamil Kiełczewski Over a year ago

@umbe1987 Your last comment is good point to create NEW question in stack-overflow (because is different topic than your main question)

umbe1987 Over a year ago

Really sorry to delete the comment just before your answer. Anyway, I thought the same so I'll probably post a new question if I don't find out myself a way to "return result" rather than "alerting it".

umbe1987 Over a year ago

Ok, it seems cors-anywhere does not work with localhost. I should probably use a VPN to let cors-anywhere reach my computer.

Kamil Kiełczewski Over a year ago

Yes of course - third-party service usually will not "see" your localhost.

Collectives™ on Stack Overflow

testing fetch API with JSFiddle - CORS errors [duplicate]

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related