0

I am using Java 8, Tomcat 8, Spring 3.0, jQuery 2.2.4, chrome browser.

My request using $.ajax is successful. I am moving away from jQuery and wanted to use XMLHttpRequest object. I am getting "Access-Control-Allow-Origin" error.

I am setting following parameters in javascript.

var xhttp = new XMLHttpRequest();
xhttp.open("POST", request, true);
xhttp.onreadystatechange = function() {
    if (this.status == 200) {
        alert("Saved Successfully.");
    }
};

xhttp.setRequestHeader("Content-type", "plain/text;charset=UTF-8");
xhttp.setRequestHeader("crossDomain", "true");
xhttp.setRequestHeader("Access-Control-Allow-Origin", "*");
xhttp.setRequestHeader("Accept", "text/plain; */*; *");

xhttp.send(data);

Following is jquery call, which works.

$.ajax({
            type: "POST",
            url: request,
            data: data,
            dataType: 'text',
            crossDomain: "true",
            statusCode: {
                200: function(data) {
                    alert("Saved Successfully.");
                }
            }
        });

I am setting following parameters to response object.

response.addHeader( "Content-Type", "text/plain" );
response.addHeader("Access-Control-Allow-Origin", "*");     
response.addHeader("Access-Control-Allow-Methods","GET,POST,OPTIONS");
response.addHeader("Access-Control-Allow-Headers","Content-Type, Content-
  Range, Content-Disposition, Content-Description");

The same setup works for JQuery call, so I do not think problem with setup.

Can somebody please suggest what is missing?

FOLLOWING CODE WORKED:

var xhttp = new XMLHttpRequest();
xhttp.open("POST", request, true);
xhttp.onreadystatechange = function() {
   if (this.status == 200) { }};

//xhttp.setRequestHeader("crossDomain", "true");
xhttp.setRequestHeader("Accept", "text/plain; *//*; *");
//xhttp.withCredentials = true;
xhttp.send(data);
msj
  • 1
  • 2
  • I have tried by not setting Content-Type header. I am also sending data using URL encoding. – msj Nov 22 '17 at 09:36
  • What browser do you test in? – Dmitry Demidovsky Nov 22 '17 at 10:10
  • Chrome, 64bit 62.0xxx – msj Nov 22 '17 at 10:15
  • Have you tried ```xhttp.withCredentials = true```? – Dmitry Demidovsky Nov 22 '17 at 10:28
  • 1
    `xhttp.setRequestHeader("Access-Control-Allow-Origin", "*");` is nonsense. This is not a request header, it's only valid as a response header. You aren't allowed to tell the server what origins to accept requests from! `xhttp.setRequestHeader("crossDomain", "true");` is also nonsense I think. Never heard of such a header before and can't find anything about it. If a request is cross-domain, the browser can tell by the URL, it doesn't need you to instruct it one way or the other. – ADyson Nov 22 '17 at 10:54
  • Show the full code for both your jquery version, and the XHR version (not just the headers). Also it's worth actually using your browser tools to look at what HTTP request the two versions generate and playing spot the difference, then tweak your XHR version until it produces the same successful output as the jQuery version. Really you should have debugged like that before posting the question, surely? If you get stuck with what do to, post all the info I've mentioned above into your question. Right now there's not enough information and code given to be able to answer accurately. – ADyson Nov 22 '17 at 10:58
  • I agree with you ADyson. I am at point where I will try everything to get it work. I have already set Access-Control-Allow-Origin at java side. – msj Nov 22 '17 at 11:12
  • I have not tried xhttp.withCredentials = true. I will certainly try that and check. Thanks Dmitry. – msj Nov 22 '17 at 11:14
  • I tried xhttp.withCredentials=true, and it did not helped. Thanks for suggestion though. – msj Nov 22 '17 at 11:42
  • what is `data`? Is it just plain text? In the XHR version you're telling the server it's text. In the jQuery version you don't mention the content type. Also post the actual generated HTTP request in each case (from your network tools, or from a tool like Fiddler), so we can see the difference. And you mention you get an access-control error, but it would be great to see the _exact_ error message generated. – ADyson Nov 22 '17 at 12:16
  • Guys, I got it. I commented the crossDomain header from javascript (since i was setting allow header.) and it worked. This is final thing look... var xhttp = new XMLHttpRequest(); xhttp.open("POST", request, true); xhttp.onreadystatechange = function() { if (this.status == 200) { }}; //xhttp.setRequestHeader("crossDomain", "true"); xhttp.setRequestHeader("Accept", "text/plain; *//*; *"); //xhttp.withCredentials = true; xhttp.send(data); – msj Nov 22 '17 at 12:24
  • Thank you Dimitry and ADyson for your help. – msj Nov 22 '17 at 12:27

0 Answers0