Working with HTTPS in Angular: A guide to using $http

Question

Working with HTTPS in Angular: A guide to using $http

Can anyone provide guidance on how to handle https + cross-domain URL using $http?

I managed to solve my issue using $.ajax, but I prefer using $http because I have an $http interceptor set up to automate certain processes.

I've checked out related posts [link1, link2, link3] but none of them have resolved my issue.

I've attached a screenshot of my console for reference.

The strange thing is that $http is using the OPTION method instead of POST as specified.

Below is a snippet of my code:

$http({
    method: 'POST',
    url: '/HearingCentre',
    data: {
        Type: ['P', 'V']
    },
    success: function (res) {
        console.log(res);
        d.resolve(res);
    },
    error: function (res) {
        console.log(res);
        d.reject(res);
    }
 });

NOTE: I'm utilizing an $http interceptor that appends the base API URL to the specified URL.

$.ajax version

$.ajax({
    method: 'POST',
    crossDomain: true,
    url: 'https://ahtstest.hearing.com.au/services/api/HearingCentre',
    data: {
        Type: ['P', 'V']
    },
    success: function (res) {
        console.log(res);
    },
    error: function (res) {
        console.log(res);
    }
});

Does anyone have a solution to this issue?

javascript ajax angularjs angular-http

Answer 1

Answer №1

var appUser = angular.module('appUser', []);
    appUser.controller('UserController', function ($scope,$http) {

        //making a server call using Angular 
        $scope.makeServerCall = function() {
                var url = '/root/jsp/catalog/xml/getJsp.jsp?PatientId=9175;
                $http({
                    crossDomain: true,
                    xhrFields: {withCredentials: false},
                    headers: {'Accept': 'application/json','Content-Type': 'application/json'},
                    method: 'GET',
                    url: url
                }).then(function(response) {
                    console.log("Request successful: "+JSON.stringify(response));
                },function(response) {
                    console.log("Request error:   "+JSON.stringify(response));
                });
        };
  }

Ensure that your server side allows cross domain requests. For example, in Spring MVC, you can add a filter and configure cross domain requests as shown below. If you are using a different language like PHP, you will need to set the appropriate response headers.

Server filter for Spring MVC

@Component
public class EcwCORSFilter implements Filter {

        public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
                HttpServletResponse response = (HttpServletResponse) res;
                response.setHeader("Access-Control-Allow-Origin", "*");
                response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
                response.setHeader("Access-Control-Max-Age", "3600");
                response.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Requested-With,isAjaxRequest");
                chain.doFilter(req, res);
        }

        public void init(FilterConfig filterConfig) {
        }

        public void destroy() {
        }

}

Answer 2

var appUser = angular.module('appUser', []);
    appUser.controller('UserController', function ($scope,$http) {

        //making a server call using Angular 
        $scope.makeServerCall = function() {
                var url = '/root/jsp/catalog/xml/getJsp.jsp?PatientId=9175;
                $http({
                    crossDomain: true,
                    xhrFields: {withCredentials: false},
                    headers: {'Accept': 'application/json','Content-Type': 'application/json'},
                    method: 'GET',
                    url: url
                }).then(function(response) {
                    console.log("Request successful: "+JSON.stringify(response));
                },function(response) {
                    console.log("Request error:   "+JSON.stringify(response));
                });
        };
  }

Ensure that your server side allows cross domain requests. For example, in Spring MVC, you can add a filter and configure cross domain requests as shown below. If you are using a different language like PHP, you will need to set the appropriate response headers.

Server filter for Spring MVC

@Component
public class EcwCORSFilter implements Filter {

        public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
                HttpServletResponse response = (HttpServletResponse) res;
                response.setHeader("Access-Control-Allow-Origin", "*");
                response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
                response.setHeader("Access-Control-Max-Age", "3600");
                response.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Requested-With,isAjaxRequest");
                chain.doFilter(req, res);
        }

        public void init(FilterConfig filterConfig) {
        }

        public void destroy() {
        }

}

Working with HTTPS in Angular: A guide to using $http

Answer №1

Similar questions

What happens when an AJAX request is aborted in jQuery - does it trigger the done or fail

Having difficulty applying capitalization to the initial word in an input using JavaScript/jQuery

What is the most effective way to loop through an object containing DOM selectors as values, and subsequently utilize them to assign new values?

Check for pattern using JavaScript regular expression

Struggling with navigating segmented dropdown buttons

To make table headers remain stationary as the data scrolls with JavaScript

Achieve filter dominance by implementing an AngularJS filter name override

Blur-triggered form validation

Exploring the Versatility of Axios

What is the process for incorporating synchronous tasks within an asynchronous function?

The datepicker is refusing to update the date format

Unidentified entity triggering an error in the console

What is the best way to loop through strings in a request object?

How do I customize the HOME page in JHipster to display unique content based on user roles?

Troubleshooting undefined results when dynamically loading JSON data with $scope values in AngularJS

Hover over to disable inline styling and restore default appearance

An unexpected error occurred in the Angular unit and integration tests, throwing off the script

Retrieving JSON Data from an API with JavaScript/jQuery

What is the best method for sending variables to the `script.` block in Pug?

Only initiate a reload once the Post request has been successfully completed