Ошибка failed to execute send on xmlhttprequest

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.

@redroot — Thanks for looking into this. There are a few different types of request involved here, so I don’t think what you’re seeing is necessarily related to what the other users were seeing, but it’s relevant.

First, calling variation doesn’t do any I/O at all; the method is synchronous in that it returns a value right away without deferring any actions, not because it performs a synchronous HTTP request (or any request).

Requests to events.launchdarkly.com are for posting analytics events (such as the ones generated by variation). That normally happens in an asynchronous flush task that is triggered by setTimeout, and the request itself is also async.

What you’re seeing is a special case. There is a beforeunload handler that is called whenever the current page is about to go away. It checks if there are any events waiting to be sent (i.e. if the flush task has not yet fired), and if so, it attempts to send them using a synchronous HTTP request (if it were async, it would have no chance to complete before the page got unloaded). All versions of ldclient-js have this. The intention is to minimize any loss of analytics events, so that your dashboard is as up to date as possible, without requiring you to use a very short event flush interval.

We suspected that browsers might stop supporting this kind of thing at some point, but we hadn’t seen this specific change in Chrome, so thanks for that. We’ll have to think about the best way to adapt. As for why you were seeing it a little before, but now are seeing it a lot, I would guess that either more of your users have the latest Chromium now, or for whatever reason your application is generating events more often than it used to so it’s more likely to have some unsent ones in the queue at page unload time.

The reason I doubt that the other comments had the same cause is that they didn’t include the «Synchronous XHR in page dismissal» message; I’m assuming they didn’t just forget to copy that, since it’s pretty distinctive.

Answer by Reginald Harrington

XMLHttpRequest cannot load
file:///C:/Users/hp/Downloads/single-page-app-angularjs-master/home.html.
Cross origin requests are only supported for protocol schemes: http,
data, chrome, chrome-extension, https, chrome-extension-resource.,Error: Failed to execute ‘send’ on ‘XMLHttpRequest’: Failed to load
‘file:///C:/Users/hp/Downloads/single-page-app-angularjs-master/home.html’.
XMLHttpRequest cannot load
file:///C:/Users/hp/Downloads/single-page-app-angularjs-master/about.html.
Cross origin requests are only supported for protocol schemes: http,
data, chrome, chrome-extension, https, chrome-extension-resource.,Error: [$compile:tpload]
http://errors.angularjs.org/1.3.3/$compile/tpload?p0=home.html,

1

Typically, Ajax isn’t supported when using file://. You’ll want to serve and access the page through an HTTP server. Note: http static server one-liners

– Jonathan Lonowski

Mar 8 ’15 at 4:08

On Windows:

chrome.exe --allow-file-access-from-files

or

chrome.exe --allow-file-access-from-files --disable-web-security

On Mac:

open /Applications/Google Chrome.app/ --args --allow-file-access-from-files

Answer by Sean Rollins

I’m very new to Angular SPA and for the first time I get a code by Googling and try to run. But I get some errors in Console. I couldn’t figure out why, I found list of following Console errors:,I got my problem. It should be helpful for another user for save the image and compress the image using javascript(AnguarJs). ,Here are some links to help point you in the right direction. If you don’t want to use any frameworks (Angular, Backbone, etc.) these links will be good. They use jQuery and perhaps one other library/plugin. Hope they help!,Now index.html is used as «master page» or «layout» if you are familiar with asp.net. When you clicking at the link, content of the templateUrl file is inserting into placeholder div.

XMLHttpRequest cannot load
file:///C:/Users/hp/Downloads/single-page-app-angularjs-master/home.html.
Cross origin requests are only supported for protocol schemes: http,
data, chrome, chrome-extension, https, chrome-extension-resource.

Error: Failed to execute ‘send’ on ‘XMLHttpRequest’: Failed to load
‘file:///C:/Users/hp/Downloads/single-page-app-angularjs-master/home.html’.
XMLHttpRequest cannot load
file:///C:/Users/hp/Downloads/single-page-app-angularjs-master/about.html.
Cross origin requests are only supported for protocol schemes: http,
data, chrome, chrome-extension, https, chrome-extension-resource.

Error: [$compile:tpload]
http://errors.angularjs.org/1.3.3/$compile/tpload?p0=home.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Single page web app using Angularjs</title>


<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-route.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  <script src="script.js"></script>


</head>
<body ng-app="single-page-app">
  <div ng-controller="cfgController">
  <div>
  <nav class="navbar navbar-inverse" role="navigation" style="padding-left:130px;">
         <ul class="nav navbar-nav">
        <li class="active"><a href="#/">Home<span class="sr-only">(current)</span></a></li>
        <li><a href="#/about">About us</a></li>
        <li><a href="#/about">Read tutorial</a></li>
      </ul>
</nav>
</div>
  <br/>

  <div ng-view class="jumbotron"></div>
  </div>
</body>
</html>

Answer by Frankie Moran

Сообщение об ошибке {readyState:0,status:0,statusText:NetworkError: не удалось выполнить ‘send’ на ‘XMLHttpRequest’: не удалось загрузить… Когда выполняется следующее $.ajax({ url:…

ошибка: NetworkError: не удалось выполнить ‘send’ на ‘XMLHttpRequest’: не удалось загрузить ‘ 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);
  }
});

Edit: я пытался отправить обычный запрос POST без AJAX, и он также выдает мне ошибку ‘undefined’:

$(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) });
        });
});

Answer by Lia Hahn

Following this I end up with the error Failed: Failed to execute ‘send’ on ‘XMLHttpRequest’: Failed to load ‘ng:///DynamicTestModule/module.ngfactory.js’.,https://stackoverflow.com/questions/44254758/angular-2-unit-testing-getting-error-failed-to-load-ng-dynamictestmodule-m,Sometimes even that doesn’t work and you need to set a breakpoint just before the exception and execute on the browser console and you receive the real error

import { Component } from '@angular/core';
import { WelcomeSegmentComponent } from '../../components/welcome-segment/welcome-segment';

@Component({
  selector: 'page-home',
  templateUrl: './home.html',
})

export class HomePage {

  constructor() {}

  ionViewDidLoad() {

  }

}

Has this ever happened to you? You’re working on the code for your Angular app. And since you’re an amazing developer, you’re also writing test specs using Jasmine. You want to run your tests so you pop down to the terminal and type ng test to execute your tests.

You expect to have everything run and pass but instead you get a half-zillion test failures and lots of them have a weird and completely unhelpful error message:

Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest'

WHAT — IS — GOING — ON?!?!?!?!

It’s Not the Real Error

The problem here is that the real error message is hidden. I don’t remember where I learned this trick but it’s helped me out a bunch of times in my Jasmine tests for Angular.

Instead of running your tests with the ng test command, use ng test --source-map=false.

The Real Error Revealed

Ok. So this time, you head to the command prompt (shell, terminal, etc) and you run ng test --source-map=false.

This time you’ll get a much better error. In this case, the error message is «NullInjectorError: R3InjectorError(DynamicTestModule)[FormBuilder -> FormBuilder]: NullInjectorError: No provider for FormBuilder!«

It’s Almost Always a Dependency Problem

The underlying problem is almost always some kind of missing dependency that’s causing the Angular dependency injection / IoC framework to panic.

So when our typescript or javascript code gets executed, it goes through something like a compilation process that take the human-readable code and turns it into something that can be executed efficiently. In the case of typescript, there’s an extra step and the code gets ‘transpiled’ into javascript before execution. The source map is supposed to help us to debug our code by connecting the instructions that are being executed to the source code that inspired those instructions. If we didn’t have that, it would be a whole lot harder to debug our apps.

My theory on why ng test –source-map=false helps in these weirdo error cases is that because of the type of problem (dependency injection problems), the source map thinks that the problem is in the dependency injection framework rather than in your code that configures the dependencies.

So. By turning off the source map generation, you get the real error.

(Disclaimer: that theory could be wildly wrong…but it makes sense to me.)

A Little More About My Error

So this blog post is about how to get at the real error message but while I’m here, I figure I might as well tell you how I fixed the real error, too. Like I said, it’s almost always a dependency problem. Lately, I’ve been working on converting a bunch of template-driven angular forms over to reactive forms. This means that in my Jasmine specs, that I need to update the imports directive to reference ReactiveFormsModule instead of FormsModule.

To fix this, I need to get to the call to TestBed.configureTestingModule and find the FormsModule import. Change this over to be ReactiveFormsModule and voila! — the problem is fixed.

Summary

In short, there’s something about dependency import problems in Jasmine tests for Angular that sometimes causes the real errors to be eaten. So if you find yourself wondering about why you’re getting that strange XMLHttpRequest error, try running your test suite without source maps. The command to do that is ng test --source-map=false.

I hope this helps.

-Ben

— Looking for help with Angular and/or Angular testing? We can help. Drop us a line at info@benday.com.