At the moment, I have a JavaScript function that sends a form POST request and opens it in a new window. Now, I want to convert this into AngularJS.
Here's the current function. The three parameters passed in determine the post URL and some data values on the POST request.
var login = function(postUrl, samlResponse, samlDomain){
var form = $('<form></form>');
form.attr('method', 'post');
form.attr('action', postUrl);
form.attr('target', '_blank');
var field = $('<input></input>');
field.attr('type', 'hidden');
field.attr('name', samlResponse);
field.attr('text-wrap','none');
field.attr('value', 'response-value');
form.append(field);
var field2 = $('<input></input>');
field2.attr('type', 'hidden');
field2.attr('name', 'RelayState');
field2.attr('value', samlDomain);
form.append(field2);
$(document.body).append(form);
form.submit();
}
My attempt to achieve the same functionality using AngularJS and $http is shown below:
$scope.login = function(postUrl, samlResponse, samlDomain) {
var tabWindowId = window.open('about:blank', '_blank');
var data = {
SAMLResponse: samlResponse,
RelayState: samlDomain
}
$http.post(postUrl, data).then(function (response) {
tabWindowId.location.href = response.headers('Location');
});
}
I'm encountering an error related to not being able to access the response due to CORS policy restrictions. However, I don't actually need to access the response, just open it in a new window.
XMLHttpRequest cannot load {{postUrl}}. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:7631' is therefore not allowed access.
What would be the best way to achieve my goal using AngularJS?
Another approach I'm considering is adding the form to the HTML template but hiding it with ng-hidden. Then, somehow triggering the form submit from within my AngularJS controller, which feels counterintuitive.