XMLHttpRequest cannot load

Hardware Arduino Yún
1

Hello !

So I send somme ajax request to my arduino Yun and I get this :
XMLHttpRequest cannot load http://MyYun.local/arduino/avancer/200. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

But the request is send because my motor turn... But I can't read the value of a pin... (I can with my browser directly or a simple REST client but not with a request)

So I try to send this unsuccessfully :
function avancer(){
var nombrePasAvancer = $("#NbPasAvancer").val();
$.ajax({
type: 'GET',
url: 'http://MyYun.local/arduino/avancer/' +nombrePasAvancer,
header:{'Access-Control-Allow-Origin': '*'},
})
}

I have succes with this code in -disablesecurity mode in chrome :
function distance(){
var requestObject = new XMLHttpRequest();
requestObject.open('GET', 'http://MyYun.local/arduino/distance/1');
requestObject.onreadystatechange = function() {
if(requestObject.readyState == 4)
{
var valeurCapteur = requestObject.responseText;
alert(valeurCapteur );
}
};
requestObject.send('toto=tutu&tata=titi');

But I want to export my code and use him everywhere and note only in this disablesecurity mode.

I think I just need to put somme headers access but I don't find how.

Thank you to help me with ajax request or XMLHttpRequest.

2

This kind of errors are usually solved using JSONP. Since your using jquery, google for "jquery jsonp"

3

I have already read this before and CORS too.

But I think I don't understand because google said with JSONP the HTTP request wait for a callback in JSONP or Arduino don't return JSONP but only some data...

So how it's possible ?

I try this :
function distance(){
$.ajax({
type: 'GET',
url: "http://MyYun.local/arduino/distance/50",

jsonp: "callback",

// tell jQuery we're expecting JSONP
dataType: "jsonp",

// work with the response
success: function( response ) {
console.log( response ); // server response
}
});
}

with this in response in my arduino :
client.println(F("{"));
client.print(F(""distance""));
client.println(distance);
client.println(F("}"));

But my console said : Resource interpreted as Script but transferred with MIME type text/plain: "http://bleuyun.local/arduino/distance/50?callback=jQuery21103206415940076113_1412327821723&_=1412327821725".

And nothing more ...

4

So with this code :
function distance(){
$.ajax({
url: "http://MyYun.local/data/get/13",
dataType: "jsonp",
jsonp: 'jsonp',
}).done(function(response) {
console.log(response.key);
});
}

I can get back the key nombre but with this one :

function distance(){
$.ajax({
url: "http://MyYun.local/arduino/distance/50",
dataType: "jsonp",
jsonp: 'jsonp',
}).done(function(response) {
console.log(response);
});
}

I get back : Resource interpreted as Script but transferred with MIME type text/plain: "http://bleuyun.local/arduino/distance/50?jsonp=jQuery21107504169421736151_1412339070007&_=1412339070008".

The value is in the URL but the .done fonction doesn't launch...

5

After have make some mixte of arduino guide and Ajax request I have this :

function distance(){
$.ajax({
type: 'GET',
url: "http://bleuyun.local/arduino/distance/50",

success: function( response ) {
console.log( response ); // server response
},
});
}

with this in the arduino:
client.println("Status: 200");
client.println("Content-type: text/javascript");
client.println("Access-Control-Allow-Origin: *");
// any other header
client.println(); //mandatory blank line
client.println(distance); //the response body

And it's work finally if this can help someone else !

6

Thanks,

but for me,

client.println("Status: 200");

does not work,
I had to replace it with

client.println("HTTP/1.1 200 OK");

Thanks again :wink:

And i hope too this can help someone else !

7