23

I'm trying to do a POST ajax request to a server hosted locally on my laptop but I can't seem to get any information back. When I click a button on my site (localhost), I can see the server passing back the correct information but on the front end I get this error:

error: NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'http://comp-ip'.

var param = JSON.stringify({varA:"varA",varB:"varB"});

$.ajax({
  type: "POST", 
  url: "http://comp-ip",
  async: false, 
  data: param,
  success: function(result, status, xhr){
    alert(result + ": " + status);
  },
  error: function(xhr, status, err) {
    alert(status + ": " + err);
  }
});

It seems to be triggering an error every time and not 'success'. Anyone have any idea what is wrong?

Edit: I've tried sending a normal POST request without AJAX and it throws me an 'undefined' error as well:

$(document).ready(function(){
    var param = JSON.stringify({varA:"varA",varB:"varB"});
     $("#btn").click(function(event){
           $.post( 
              "http://ip",
               param,
               function(data) {
                 $('#container').html(data);
               }
           ).fail(function(error) { alert(error.responseJSON) });
        });
});

Other things I've tried: 1) Changing browsers to Safari (same thing, server returns information but the site gets an error) 2) Setting async = true from false. For some reason when I set it to true, the server doesn't respond at all. When it's false the server responds.

Moo33
  • 1,251
  • 3
  • 15
  • 27

5 Answers5

17

I had this problem literally a few minutes ago. The problem is that you need to set async:false to async:true. I'm not sure exactly why this works, I guess because HTML5 is newer than XML.

Error is a bit different on this site but I think it's similar: JavaScript console.log causes error: "Synchronous XMLHttpRequest on the main thread is deprecated..."

Update

Hi, I'm back with some new and improved information. The Cross-Origin occurs with ports as well as domains/IPs, and will probably be in place with most decent browsers. If you want to know what is happening, try changing the IP to localhost or vice versa (if you are using localhost). Keep in mind this issue can occur when you are using different ports as well. For a quick fix, make sure that in the headers from whatever the back-end server is that you are putting out the correct Access-Control header response.addHeader("Access-Control-Allow-Origin", "*");.

Code is derived from this question

Community
  • 1
  • 1
rassa45
  • 3,482
  • 1
  • 29
  • 43
  • 1
    Hi, thanks for your response. I tried setting async to true from false but strangely my server isn't responding at all. As opposed to async = false which my server does return information. – Moo33 Oct 01 '15 at 03:12
  • You received an undefined error meaning that the url for the post method may be invalid. Is the js file on the server? – rassa45 Oct 01 '15 at 03:18
  • Ah yes, failed to load resource definitely means that you have the wrong url. What type of server are you using? – rassa45 Oct 01 '15 at 03:18
  • It's a java server running on my comp. However it seems to be returning the right information which means the URL should be correct. I found a different error throwing from my browser console which makes me think it's a cross domain issue. It says: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. It doesn't make sense why it's cross domain though as both are running from my computer? – Moo33 Oct 01 '15 at 06:53
  • To answer after some time, the location header is different. My guess is you're running the servers on different ports or a local host sub domain. Either way, its important to keep in mind that a localhost:4000 is still quite different from for example a localhost:80. To a computer, its possible for a malicious and benign server to be on the same location, just because the server locations are different. For security purposes, this feature is enabled. It might not happen on an older browser like Netscape or if you use curl. – rassa45 May 28 '17 at 17:49
5

It was a Cross Origin Resource problem (CORS). My server was returning the correct information to me but my browser refused to accept it. To fix it I had to add 2 lines on my java server (not my site) to set them as the response header:

yourownvariable.setHeader("Access-Control-Allow-Origin:", "origin url of your site");
yourownvariable.setHeader("Access-Control-Allow-Methods", "GET, POST,PUT");
Moo33
  • 1,251
  • 3
  • 15
  • 27
  • This error occurred [here](http://stackoverflow.com/questions/20433655/no-access-control-allow-origin-header-is-present-on-the-requested-resource-or) also – rassa45 Oct 01 '15 at 12:19
2

I was having the same problem, with an identical error message. In my case it was caused by the server setting a Feature-Policy header with sync-xhr: none. Removing this directive fixed the problem.

Mark Fisher
  • 965
  • 1
  • 11
  • 30
0

This started happening a few days after some browser updates. It seems that the up to date browsers are now refusing non-async requests.

Short answer: Do not set async: false

James John McGuire 'Jahmic'
  • 11,728
  • 11
  • 67
  • 78
-2

You can test your webpages with Chrome on Windows like this

chrome.exe --allow-file-access-from-files
Daniel Georgiev
  • 1,292
  • 16
  • 14