Problem with CORS

WebThings
#1

I’m new to mozilla web things I used an esp8266 and with jquery getJSON at the link http://192.168.1.115/things/bulb/properties/on I read the ON value but I can’t make the post or put and change the state of ON: {‘on’: true}, problems with CORS.
How can I do?

1 Like
#2

What’s the specific issue you’re seeing? CORS is enabled in webthing-arduino.

#3

in a web page I use
$(".stato").bind(“click”, function () {
var url=“http://192.168.1.115/things/bulb/properties/on”
$.getJSON( url, function( data ) { alert(data.on) })
}).css(“cursor”,“pointer”);
and it works,

while this
function prova(){
jQuery.support.cors = true;
var jqxhr = $.ajax({
url:“http://192.168.1.115/things/bulb/properties/on”,
type :‘POST’,
headers: {
“accept”: “application/json”,
“Access-Control-Allow-Origin”:"*",
“Access-Control-Allow-Methods”:“GET, POST, PUT, DELETE, OPTIONS”,
},
contentType: “application/json; charset=utf-8”,
dataType: ‘json’,
data: JSON.stringify({ “on”: true }),
})
.done(function() { alert( “success” ); })
.fail(function() { alert( “error” ); })
.always(function() { alert( “complete” ); });
}
doesn’t work and return error.
in console i read Access to XMLHttpRequest at ‘http://192.168.1.115/things/bulb/properties/on’ from origin ‘http://localhost’ has been blocked by CORS policy,
thanks

#4

Ok, a couple things.

  1. You don’t need to set the CORS headers on your request.
  2. You need to use PUT, not POST.
#5

it doesn’t even work with PUT and in console returns
Response to preflight request doesn’t pass access control check:

#6

As it turns out, the library was missing support for OPTIONS requests, which is needed for proper CORS support. I’ve just published version 0.11.2 of the webthing library which should fix the issue.

#7

Thanks for making the changes, but error still returns, now is 422.
I downloaded the new library, uploading the code LED sample on esp8266, i connected to raspberry and it works. Unique variation i add is the ip address static whit IPAddress ip(192, 168, 1, 115); etc.
Now, whith one html page whith included the library jquery i can read status of properties if is ON or OFF whith getJSON interrogating the address http://192.168.1.115/things/bulb/properties/on,
but if I want to change the status, I can’t.
For modify the state i use this routine whit PUT
$(".stato").bind(“click”, function () {
$.ajax({
url: “http://192.168.1.115/things/bulb/properties/on”,
type: “PUT”,
data: JSON.stringify(’{“on”: false}’),
dataType: “json”
})
});
I have tried with different browsers and they all return me a 422 error, firefox also gives me an error 204 on the options method, while crhome adds me an error “Failed to execute ‘add’ on ‘DOMTokenList’: The token provided must not be empty”.
Where am I wrong?
I hope I explained myself. Thank you.

#8

422 indicates that your request was missing data. Can you try with fetch() instead? Example below:

fetch(
  'http://192.168.1.115/things/bulb/properties/on',
  {
    method: 'PUT',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({'on': true}),
  }
).then((res) => {
  if (!res.ok) {
    throw new Error(res.status);
  }

  return res.json();
}).then((body) => {
  console.log(body);
}).catch((e) => {
  console.error(e);
});
#9

Thanks for your help, now it works.
I went ahead and tried to make a request remotely by replacing the local ip with the url with xxxxxx.mozilla-iot.org/things/bulb/properties/on and it returns an unauthorized 401 error. Seems like I can’t.
I added the token and in this case it returns the 404 error. How can I do?

#10

The URL is not the same when accessing via the gateway. Open the properties view in the gateway UI and check out your address bar to find the proper base URL.

#11

perfect, it works
I managed to establish also a websocket connection
thanks

#12

hi,
what is the appropriate URL when directly want to access the thing?
(not accessing via the gateway)
please help
this model of URL doesn’t really work for sending PUT requests directly to things!
http://ip of the thing/things/bulb/properties/on