Send the right XMLHttpRequest header

Question

I'm trying to make the a great wifi chip (esp8266) to communicate with a HTML webpage.

Therefore I make use of XMLHttpRequest. I know that I have to set the Access-Control-Allow-Origin to let it work..

I still get the error in the console:

XMLHttpRequest cannot load http://x.x.x.x:8000/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

So the wifi module is sending this header:

WIFI MODULE RESPONSE

HTTP/1.1 200 OK\r\n
Access-Control-Allow-Origin: *\r\n
Content-Type: text/html\r\n
Hello world!\r\n

Then I'm trying to acces it with the webpage:

JAVASCIPT

var xmlhttp;

function loadXMLDoc(){
    xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        console.log("readystate " + xmlhttp.readyState);
        console.log("status " + xmlhttp.status);
        console.log(xmlhttp.getAllResponseHeaders());
        console.log(xmlhttp.responseText);

        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            console.log(xmlhttp.responseText);
            //document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","http://192.168.1.101:8000",true);
    xmlhttp.send();
    //console.log("status " + xmlhttp.status);
}

function send() {
    xmlhttp.send("jooooo");
}

loadXMLDoc();

Sorry but it's not possible to give an example, because it's running locally.

Maybe someone can give me a debug method?

Update

I'm able to watch the headers in Chrome. The \r\n is displayed in the header. I can send a 200 or 404 status. But now I have to find out how to send the return statement. View HTTP headers in Google Chrome?

So in my chrome console I get the header: "200 OK\r\n\r\nOrigin: test\r\nAccess-Control-Allow-Origin: *\r\n\r\nContent-Type: text/html\r\n\r\nHello world!\r\n\r\n"

With a normal page I see 200 OK. So the \r\n is not working.... I have to find out how to send the return statement. When I set the 200 to a 404, I get a page not found. So the first part is received...

`Access-Control-Allow-Origin: "*"` is wrong syntax. It shouldn't contain quotes. — hindmost, Oct 06 '14 at 15:00
Ok. Tnx. Maybe i tried without already. But I will try it again — Johan Hoeksma, Oct 06 '14 at 15:02
The response-header, is also empty: console.log(xmlhttp.getAllResponseHeaders()); — Johan Hoeksma, Oct 06 '14 at 15:08

score 0 · Accepted Answer · answered Oct 06 '14 at 18:28

0

Ok, I removed the \r\n chars.

I just send the headers with the serial communication separate.

I succeed in sending: HTTP/1.1 200 OK Access-Control-Allow-Origin: * Content-Type: text/html

And the response will be loaded in the javascript..

answered Oct 06 '14 at 18:28

Johan Hoeksma

3,534
5
28
40

Send the right XMLHttpRequest header

1 Answers1