Getting "TypeError: Failed to fetch" with some url

Question

I'm facing "TypeError: Failed to fetch" errors in my React App.

Depending on the url of the query I run I sometimes encounter the error, although the query does return a valid result when I test it in my browser.

Here are two examples with two sample URL:

(function(){

    var GetRequestResult = function (url) {
        return fetch(url, {
        headers: { 'Access-Control-Allow-Origin': '*'}})
        .then(response => response.text())
        .then(text => console.log(text))
        .catch(error => console.log(error))
    };
  
  this.GetRequestResult = GetRequestResult;

})(this);

console.log(GetRequestResult('https://jsonplaceholder.typicode.com/comments?postId=1')); // Works
console.log(GetRequestResult('http://api.plos.org/search?q=title:DNA')); // Returns 'TypeError: Failed to fetch'

So I have two questions:

1. Why the first one works and not the second ?
2. My final need is to retrieve a response from Google's Recaptcha API (https://developers.google.com/recaptcha/docs/verify) using the URL: https://www.google.com/recaptcha/api/siteverify . I am encountering the error on this url also. I guess it's related to CORS (I tried to modify the Headers of my requests, to define https://www.google.com as a proxy, to use different methods to execute the requests ...) but without success. Any idea to solve this problem ?

Answer 1

The problem is solved.

I was trying to call the Google Recaptcha API (https://www.google.com/recaptcha/api/siteverify) from my frontend.

Due to Google's CORS policy this only seems possible from the backend side.