I am fairly new to AngularJS. A particular project necessitated using a MVC and I choose angular for it's ability to template and do seamless DOM insertions.
I'm loading a local config file to load specific API endpoints (created by the client) and then doing two AJAX calls to populate an object. Problem is that the second ajax call isn't working. It shows a console error similar to what you would see if you've encountered a CORS issue but I know by testing the endpoint via a REST client that the endpoint and parameters are correct (also tested it using a regular JQuery ajax call). I do not want to revert to jQuery code and would prefer to use angular to accomplish this.
This is the error I get:
XMLHttpRequest cannot load https://this/url/endpoint. Response for preflight is invalid (redirect)
Code:
var object = {};
angular.module('myApp').controller('myController', function ($scope, $http) {
$http.get('data.json').then(function (data) {
var url1 = data.url;
var httpMethod1 = data.http1;
var url2 = data.url2;
var httpMethod2 = data.http2;
$http({
method: httpMethod1,
url: url1,
headers: {"token": token},
dataType: 'json'
}).success(function (data, status, headers, config) {
object.attr1 = data.att0;
object.attr2 = data.att1;
}).error(function (data, status, headers, config) {
alert('failed');
});
//THIS ONE FAILS
$http({
url: httpMethod2,
type: url2,
headers: {"token": token},
data: { "value" : "value"}
dataType: 'json',
}).success(function (data, status, headers, config) {
object.attr3 = data.att0;
object.attr4 = data.att1;
}).error(function (data, status, headers, config) {
alert('failed');
});
});
});
Copyright Notice:Content Author:「user2951483」,Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/40901246/multiple-ajax-calls-using-angularjs-issues