Fetch not working over HTTP or HTTPS if signed using letsencrypt/cert-bot

[lukes611]

Fetch is not working for me.

I am using the fitbit ionic with the Samsung Galaxy s7 Android phone.

I cannot fetch to any HTTP end-point, the initial fetch passes then the response is 400 and my server does not record any interaction.

I got an SSL certificate using letsencrypt and certbot, and when fetching over https the fetch fails outright with TypeError: Failed to fetch.

To me it costs a lot to purchase a major company's ssl certificate service. How can I solve this problem?

Please help

[SunsetRunner]

We don't request specific SSL certificate, so letsencrypt should be good. If you use a tool like Postman, are you able to call your HTTP endpoint? If so, is it possible for you to share your application to me in private so I can give it a closer look?

[Gondwana]

I'm using fetch() in an ionic companion app with a letsencrypt HTTPS and it's working fine.

[lukes611]

Hi Fred,

Thanks for the quick reply.

In the companion index.js I have the following code:

/*
 * Entry point for the companion app
 */

console.log("Companion Started");

const test = () => {
  fetch('https://lukes611.com/ping')
    .then(response => response.json())
    .then(text => console.log(text))
    .catch(error => console.log(error.toString()));
};

test(); // test right away
setTimeout(test, 5000); // test again 5 seconds later

I can access it through postman and I set the server to allow any origin.

On this site right now, I can open the chrome dev tools and past in that code and it can fetch (which is cross site).

I'm not sure what the problem is.

Please help!

[lukes611]

I should also mention, I can fetch other sites and end-points like https://github.com

and I have the Internet permission accepted in the package.json file

Oh and I tried (response => response.text()) as well in the first promise's then function returned by fetch

[Gondwana]

Two thoughts:

• Try fetch mode 'cors'. (I'm pretty sure the server-side stuff is okay; I could get at it fine.)
• You can console.log diagostic messages in each then(), which would narrow down which bit is failing.

[lukes611]

Thanks Catplace,

I did try already but still the same response: the catch with fetchError is the one where I am stuck.

I tried cors and no-cors (which I actually do want the response so I don't really want to use cors) as well as different content types

const test = () => {
  fetch('https://lukes611.com/ping',{
    method: 'GET',
    mode: 'cors',
    headers: new Headers({
      "Content-Type": 'application/json; charset=utf-8'
    })
  })
    .then(response => {
      console.log('in response');
      response.text().then(data => {
        console.log('successful');
        console.log(data);
      })
      .catch(responseParsingError => {
        console.log('fetchError');
        console.log(responseParsingError.name);
        console.log(responseParsingError.message);
        console.log(responseParsingError.toString());
        console.log(responseParsingError.stack);
      });
    }).catch(fetchError => {
      console.log('fetchError');
      console.log(fetchError.name);
      console.log(fetchError.message);
      console.log(fetchError.toString());
      console.log(fetchError.stack);
    })
};

test(); // test right away
setTimeout(test, 5000); // test again 5 seconds later

[FitJason]

I'm having a similar issue. Did you figure anything out in the end?

Is there a more basic test I can do to test internet connectivity before trying my fetch?

[JonFitbit]

I will be doing some testing on this. Can you confirm if you're using fetch() on an IP address, or a DNS name?

[FitJason]

Hi, it was a DNS name. I tested it with hurl.it and got the following response:

 It's my own site and it doesn't have a security certificate.

[lukes611]

Hi Jason,

I am still having the problem.

Jon, I am using a dns not an ip address,

it is here: https://lukes611.com/ping

It simply returns JSON data

[FitJason]

A few other notes if it helps:

1. I'm using a companion folder with an index.js file.
2. I'm using fetch()
3. I have ticked the Internet requested permission in the package.json
4. I have checked the permission has been granted with:

5. import { me } from "companion";
   if (me.permissions.granted("access_internet")) {
      console.log("We're allowed to access the internet :-)"); 
   }

   I've tried a variety of methods using fetch; like with a promise, request initialisation and specific headers.
6. I have developer mode enabled on my phone and ionic.
7. I am using a Samsung S8
8. I developed the endpoint myself with the header set to content-type: application/json
9. My website does not have a security certificate yet.

The error I receive is Unexpected end of JSON input. Which is leading me to believe the fetch thinks it's made a successful request, but actually no data has been downloaded. There is no evidence that the application has successfully connected to the internet and retrieved the endpoint.

Which lead me to my question, how can I do a simple test with any other function to test the internet connectivity is working?

[technosophos · Accepted solution]

Not sure I can provide a simple solution, but I can at least confirm that after some trial-and-error, I got a fetch request working reliably.

Here's the combination that worked for me:

1. In package.json, I checked "Internet"

2. I switched my http endpoint to an https endpoint, generating SSL certs with letsencrypt.

3. I used the following code in my companion/index.js

fetch(url, {method: "GET"}).then( (res) => {
    console.log("OK")
    return `Code: ${res.status} ${res.statusText}`
  }).then(txt => {
    // This is sending the message back to the watch. You can omit for testing.
    messaging.peerSocket.send(txt)
  }).catch( e => {
    console.log(e);
  });

 I too am using a Samsung S8.

I found it useful to set up a simple webserver where I can watch the logs easily. That helped me see when I was connecting to the server and when I wasn't.