testing fetch API with JSFiddle - CORS errors

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

score 5 · Accepted Answer · edited Dec 15 '20 at 08:28

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 '20 at 08:28

guettli

25,042
81
346
663

answered May 14 '18 at 11:12

Kamil Kiełczewski

85,173
29
368
345

1

Thanks, just what I was looking for. – umbe1987 May 14 '18 at 13:25
@umbe1987 Your last comment is good point to create NEW question in stack-overflow (because is different topic than your main question) – Kamil Kiełczewski May 14 '18 at 13:56
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 May 14 '18 at 13:58
Ok, it seems cors-anywhere does not work with localhost. I should probably use a VPN to let cors-anywhere reach my computer. – umbe1987 May 14 '18 at 14:47
1

Yes of course - third-party service usually will not "see" your localhost. – Kamil Kiełczewski May 14 '18 at 15:29

testing fetch API with JSFiddle - CORS errors

1 Answers1