Encountering "net::ERR_EMPTY_RESPONSE" error when making a HTTP PUT request using the HUE API in JavaScript

  1. GET requests are functioning properly.

  2. PUT requests made from the API Debug tool are also working correctly.

  3. However, both PUT and POST requests, regardless of the data or API URL used, are resulting in the following error:

    example:

    OPTIONS net::ERR_EMPTY_RESPONSE

These requests are returning null responses.

Below is the relevant Angular JS code:

var bridgeIp = "http://xxx.xxx.x.x";
var username = "authenticatedUsername";
var lightData = {"on": true};

$http.put(bridgeIp+"/api/"+username+"/lights/5/state", lightData)
.then(function success(response) {
          console.log(response.data);
     }, function error(e){
          console.log(e);
     });

I have also attempted to use jQuery's Ajax function and encountered the same issue.

I tried to compare the requests using Fiddler, but faced a CORS error. Subsequently, I compared the requests with Charles, and here are the results:

From API Debug Tool:

URL http://xxx.xxx.x.x/api/AuthorizedUser/lights/5/state
Status  Complete
Response Code   200 OK
Protocol    HTTP/1.1
SSL -
Method  PUT
Kept Alive  No
Content-Type    application/json
Client Address  /127.0.0.1
Remote Address  xxx.xxx.x.x/xxx.xxx.x.x
Timing  
Request Start Time  3/23/16 18:24:17
Request End Time    3/23/16 18:24:17
Response Start Time 3/23/16 18:24:17
Response End Time   3/23/16 18:24:17
Duration    43 ms
DNS 0 ms
Connect 2 ms
SSL Handshake   -
Request 2 ms
Response    1 ms
Latency 37 ms
Speed   20.46 KB/s
Response Speed  879.88 KB/s
Size    
Request Header  427 bytes
Response Header 421 bytes
Request 12 bytes
Response    41 bytes
Total   901 bytes
Request Compression -
Response Compression    -

From my HTTP request through JavaScript:

URL http://xxx.xxx.x.x/api/AuthorizedUser/lights/5/state
Status  Failed
Failure Remote server closed the connection before sending response header
Response Code   -
Protocol    HTTP/1.1
SSL -
Method  OPTIONS
Kept Alive  No
Content-Type    -
Client Address  /127.0.0.1
Remote Address  xxx.xxx.x.x/xxx.xxx.x.x
Timing  
Request Start Time  3/23/16 18:24:55
Request End Time    3/23/16 18:24:55
Response Start Time -
Response End Time   3/23/16 18:24:55
Duration    14 ms
DNS 0 ms
Connect 2 ms
SSL Handshake   -
Request 2 ms
Response    -
Latency -
Speed   31.74 KB/s
Response Speed  -
Size    
Request Header  455 bytes
Response Header -
Request -
Response    -
Total   455 bytes
Request Compression -
Response Compression    -

Any assistance with this issue would be highly appreciated.

javascriptangularjsajaxputphilips-hue

Answer №1

Here is a solution that has worked well for me:

let request = new XMLHttpRequest();
request.open('PUT', 'http://<local address>/api/<username>/groups/1/action');
request.send('{"on":true, "hue": 16000, "bri": 254'}');

Answer №2

The JavaScript result displays the Method as OPTIONS. If the OPTIONS at the beginning of the post is referring to ...APIRequest/lights/light/1/state, it appears to be incorrect. It should likely be ...APIRequest/lights/1/state instead.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Boost the frequency of updates in Meteor.observe

When Python writes to a database (mongo) every second in the setup, Meteor.js is expected to react immediately to the new record insertion. Issue: However, the use of cursor.observe() results in the console outputting only 4-5 seconds after the new record ...

javascriptnode.jsmongodbredismeteor

Can the default position of the scrollbar be set to remain at the bottom?

I have a select option tag with a scrollbar to view the contents in the dropdown. I am looking for a way to automatically position the scroll at the bottom when an item is selected from the dropdown. jquery code $('document').ready(func ...

javascripthtmljquerycssfrontend

Angular JS tutorial causing confusion with terminology

I'm currently working on a project and came across a sentence that has me stumped. It mentions potential issues when naming properties in Angular: The statement mentions how any errors related to property access are silently accepted, even if they in ...

angularjspropertiesnaming

Website loses its css after printing

I'm having trouble printing a website with a simple layout featuring two columns, each containing tables. The website I want to print is located at the following link: . However, when I try to print it using the JavaScript function window.print(), the ...

javascripthtmlcssprinting

Creating stylish error labels using Materialize CSS

While Materialize has built-in support for validating input fields like email, I am looking to implement real-time validation for password inputs as well. This would involve dynamically adding error or success labels using JavaScript. Unfortunately, my at ...

javascriptjquerymaterialize

React App searching for unused static files

Currently, my React application is deployed on the Nginx web server. Accessing the application using the URL XX.XX.XX.XX works fine. However, I want to be able to access it through the URL XX.XX.XX.XX/myapp/frontend. To achieve this, I have set up a revers ...

javascriptreactjsnginxproduction

Jest throws an error: require function is not defined

I've been struggling with an issue in Angular for the past 3 days. I'm using [email protected] and [email protected]. I even tried downgrading and testing with LTS versions of node and npm, but I keep encountering the same error. Here ...

javascriptangularnpmjestjs

Organize the strings by first sorting them alphabetically based on the first letter and then by length starting from the longest. Next, arrange the strings in ascending

After experimenting and seeking help on stackoverflow, I have managed to sort an array of objects based on the 'plate' key using the following function: sort(function(a, b) { return a.plate.toLowerCase() > b.plate.toLowerCase() ? a.pla ...

javascriptarrayssortingvuejs2

Adding points to a bar or pie chart in a Vue environment can be achieved dynamically by utilizing Vue's reactivity system

Looking to bootstrap a Highcharts bar chart and dynamically add points to it within a Vue container, the documentation references addPoint(), setData(), and update(). However, I struggled to make any of these methods work. The provided demo for updating a ...

javascripthighchartsvue.js

Converting a JavaScript IIFE library into a React Component

Hello, I am currently in the process of learning React JS and there are two JavaScript files that I am working on: Polyfill.js -> hosted on github CustomNavbar.js -> created by me Here is the structure of polyfill.js: export default (function(win ...

javascripthtmlreactjsimportexport

The use of set.has in filtering does not produce the desired outcome

I am attempting to use Set.has to filter an array in the following way: const input = [ { nick: 'Some name', x: 19, y: 24, grp: 4, id: '19340' }, { nick: 'Some name', x: 20, y: 27, grp: 11, id: '19343' }, { ...

javascriptarraysfilter

Having trouble with AngularJS not rendering on your HTML page?

This question has probably been asked countless times, but I'm genuinely unsure about what I'm doing wrong. The solutions I've come across so far haven't fixed the issue for me. Just to provide some context, I'm currently followin ...

javascripthtmlangularjs

Conditional Matching with Javascript Regular Expressions

My strings are formatted like this: #WTK-56491650H #=> want to capture '56491650H' #M123456 #=> want to capture 'M123456' I am trying to extract everything after the # character, unless there is a dash. In that case, I onl ...

javascriptregex

Tips for fully accessing a website with javascript enabled through an android service

I've been attempting to extract data from a website node that includes JavaScript. In VB .NET, the code I typically use is as follows: Dim listSpan As IHTMLElementCollection = bodyel.getElementsByTagName("span") For Each spanItem As IHTMLElement In ...

javascriptandroidjsonvb.netjsoup

Tips for changing array items into an object using JavaScript

I am working with a list of arrays. let arr = ["one","two"] This is the code I am currently using: arr.map(item=>{ item }) I am trying to transform the array into an array of sub-arrays [ { "one": [{ ...

javascriptarraysreactjsobjectfunctional-programming

Having trouble establishing a connection to MySQL through NodeJS and Express

I am currently attempting to establish a connection to MySQL using a nodeJS app with express as the server. I have referred to the mysql npm documentation to start the connection process, but I keep encountering an error in the callback function within cre ...

javascriptmysqlnode.jsexpressphpmyadmin

What exactly is the purpose of calling upon 'express' - a reference to a function or an object?

It is my belief that by utilizing var express = require('express');, the variable express receives a function reference of createApplication(). So, when we invoke express(), it will yield an app object. However, my question is, if var express is ...

javascriptnode.jsexpress

Is it possible to modify the contents within the JSP div tag without replacing them through an AJAX call?

In my JSP, I face a scenario where there is a div tag with scriptlet content that pulls data from the database every time a request is received from the server. Previously, I was refreshing the entire page with each update, which not only loaded all the re ...

javascriptjqueryajaxjspscriptlet

Leveraging server-side data with jQuery

When my client side JQuery receives an array of JSON called crude, I intend to access and use it in the following way: script. jQuery(function ($) { var x = 0; alert(!{JSON.stringify(crude[x])}); ...

javascriptjquerynode.js

Enabling a variable to encompass various types within ReactJS

In my code, I have defined two distinct types as follows: type A = $ReadOnly<{ a: ?$ReadOnlyArray<string>, b: ?string, }>; and type B = $ReadOnly<{ c: ?$ReadOnlyArray<boolean>, d: ?number, }>; Now, I am looking to create a ...

javascriptreactjs