Type error: failed to fetch

[Antoon]

I'm trying to send a message to an UPnp server.

This is the fetch message I'm trying to send:

 export function soap2() {
                var myHeaders = new Headers();
                myHeaders.append('Content-Type', 'text/xml');
                myHeaders.append("SOAPAction", '"urn:schemas-upnp-org:service:AVTransport:1#Play"');

                var sr =
                        '<?xml version="1.0" encoding="utf-8"?>' +
                        '<soap:Envelope ' +
                        'xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" ' +
                        'soap:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/">' +
                        '<soap:Body>' +
                        '<u:Play xmlns:u="urn:schemas-upnp-org:service:AVTransport:1">' +
                        '<InstanceID>0</InstanceID>' +
                        '<Speed>1</Speed>' +
                        '</u:Play>' +
                        '</soap:Body>' +
                        '</soap:Envelope>';

                fetch('http://192.168.0.171:1400/MediaRenderer/AVTransport/Control',
                        {
                            method: 'POST',
                            headers: myHeaders,
                            mode: 'cors',
                            cache: 'default'
                        }, 
                        sr).then(function (response) {
                                  Logger.log("SOAP-soap2 | in response") 
                                  return response.blob();
                                }).then(function (myBlob) {
                                        var objectURL = URL.createObjectURL(myBlob);
                                        myImage.src=objectURL;})
                                   .catch(fetchError => {
                                              Logger.err("SOAP-soap2 | " + fetchError.toString());
                                              Logger.err("SOAP-soap2 | " + fetchError.stack);
                                            });

            }

The error I'm getting is:

• [16:32:20]SOAP-soap2 | TypeError: Failed to fetch
• [16:32:20]SOAP-soap2 | TypeError: Failed to fetch

Can anybody give me some direction in solving this?

Thx.

Antoon

[allyann]

There appears to be a limitation in the API that you can only fetch data using HTTPS urls. There are a couple of other related posts:

https://community.fitbit.com/t5/SDK-Development/Is-Fetch-limited-to-https/m-p/2220283#M270

and

https://community.fitbit.com/t5/SDK-Development/Fetch-not-working-over-HTTP-or-HTTPS-if-signed-using...

[Antoon]

When I change the URL to HTTPS, I still get the same error.

[danfare]

---

@Antoon wrote:

When I change the URL to HTTPS, I still get the same error.

---

Did you find any resolution for this?

[Antoon]

The Fetch statement was wrong (body part of the soap action), the right syntax is:

fetch('https://192.168.0.171:1400/MediaRenderer/AVTransport/Control',
                        {
                            method: 'POST',
                            headers: myHeaders,
                            mode: 'cors',
                            cache: 'default',
                            body: sr
                        }).then(function (response) {
                                  Logger.log("SOAP-soap2 | in response") 
                                  return response.blob();
                                })
                           .then(data => console.log('data is', data))
                           .catch(function(error) {
                                            Logger.log('SOAP-soap2-catch |' + error.message );
                                            });

            }

It still doesn't work because Sonos (the web services I was sending to) doesn't support CORS.