Fetch dosen't work only mobile platform in hosted test

Extensions
1

I’m using Fetch API to connect for my BackEndService.
It’s working well in video_overlay in PC.(also hosted test)
but my extension dosen’t work in mobile twitch app
I tested in devloper rig both video_overlay and mobile.
that worked very good in test. (local test)
but In hosted test, It dosen’t work. (in Twitch App)
Error message is ‘Failed to Fetch’
I thought Its problems is about CORS.

So I set my server header

'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST',
'Access-Control-Allow-Headers': '*',
'Access-Control-Max-Age': 10

and client header is

method: 'POST',
headers:
{
    'Content-Type': 'application/json'
},
body: lastUpdate.toJSON()

However, error message is same.

how can i fix it?

2

Your BackEndService is over https using a “real” SSL Certificate?

1 Like
3

Yes, I use ZeroSSL.
Is there a problem?

4

As long as it’s not a self signed cert! Then you should be good.

But it could be a SSL problem depending on what ciphers you have enabled on your server.

You’ll need to log the “failed to fetch” error out further and see what the actual issue is. It might be the toJSON that is failing and being logged as a Failed to fetch not enough of your code is here to understand what might be going on.

It’s not likely to be a CORS issue as it works on “Desktop” whoch wil apply the same CORS rules and limitations.

1 Like
5

I’ve debuged it below.

function FetchUpdate()
{
    $('#log').text('FetchUpdate()<br>');
    let lu = lastUpdate.toJSON();
    $('#log').text('lastUpdate : ' + lu + '<br>');

    fetch(serverURL + '/update', {
        method: 'POST',
        headers:
        {
            'Content-Type': 'application/json'
        },
        body: lu
    }).then(function (response)
    {
        $('#log').append('FETCH SUCESS');
    }).catch(function (err)
    {
        $('#log').append(err);
    });
}

It’s again log Failed to fetch.
so I changed method ‘GET’

fetch(serverURL + '/update', {
        method: 'GET'
    }).then(function (response)
    {
        $('#log').append('FETCH SUCESS');
    }).catch(function (err)
    {
        $('#log').append(err);
    });

but it’s the same err.

What am I missing? T_T
I’ve debuged video_overlay with chrome developer kit.
It’s show what I am missing from inspect network.
but in mobile, in twitch app, I cant check my packet…
I tried packet capture and show that but its incoding SSL.
I tried to decode it, I failed.
I need help… sorry…

6
  1. Run your serverURL against SSLLabs SSL Server Test (Powered by Qualys SSL Labs) to test/check that it can support mobiles calling it, it might throw up a bad cipher configuration
  2. Change $('#log').append(err); to $('#log').append(err.message); or $('#log').append(JSON.stringify(err)); to attempt to log more inforrmation. just logging err might not return anything useful to work with. Or return/append all three
  3. Load up some test code in a browser on your phone instead, outside the TwitchApp and use the relevant debugging tools for that mobile to invetigate the issue further.

I’m assuming $ is jQuery?

1 Like
7

yes, $ is jQuery.

  1. result is ‘Assessment failed: Unable to connect to the server’.
    maybe it was my backend was only use https port 80. (dose it have problem?)
  2. I changed err.message and JSON.stringify(err).
    err.message returned “Failed to fetch”, and JSON.stringify(err) returend {}.
    I dont know why it returned {}.
  3. I already tested it with my phone. it worked well. i tested url in “https://client-id.ext-twitch.tv/client-id/version/MD5/mobile.html” and only html file.

Thank you so much for your care!

8

HTTPS over a non standard port is generally not a good idea.

HTTP is on port 80
HTTPS is on port 443

Fix the SSLabs issue so a report can run.

And provide the actual URL so someone can go have a look.

1 Like
9

I want to use port 443. but It’s not work. I guest this problem cause firewall. (It’s my first time developing a web. so I have many problems.)

and test link is here ‘Document’

10

This is likely the issue.

A users web browser is more forgiving on messy/weird setups.
But a mobile will not be

1 Like