Angular - How to work with HTTPS using $http

Question

just wanted to ask on how to deal with https + cross-domain url using $http?

I've used $.ajax to solve my problem, but the reason why I wanted to use $http more is because I have an $http interceptor since using $.ajax takes a lot more line of codes rather than having an interceptor to automate some process.

I've read similar posts [link1, link2, link3] but neither of them have solved my problem.

I have an attached screenshot of my console, I hope it makes sense: .

The weird thing is the OPTION Method being used by $http which I have set it to POST

Here's my code snapshot:

$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 using an $http interceptor here so basically the URL will be appended with the base API 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);
    }
});

Do anyone have a solution for this?

This is Chrome preflighting your request in order to see which methods is allowed by your server. You need to allow CORS on your server. — Henrik Andersson, Aug 03 '15 at 04:54
install cors plugin in your google chrome then enable it and try — Rana Ahmer Yasin, Aug 03 '15 at 04:58
This might help...http://stackoverflow.com/questions/27729351/preflight-options-request-by-angularjs-not-working-with-chrome — New Dev, Aug 03 '15 at 05:00
@limelights I see.., sorry, I don't have access to the backend, but I'll let them know to allow CORS on the server. — Rene Padillo, Aug 03 '15 at 05:16

score 1 · Answer 1 · answered Aug 03 '15 at 05:04

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

        //server call with 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("Success: "+JSON.stringify(response));
                },function(response) {
                    console.log("Error:   "+JSON.stringify(response));
                });
        };
  }

And make sure that at your server side you can accessible to cross domain reuqest. Lets say I am using Spring MVC so I have added one filter and configure cross domain request to allow as follow. If you using any other language lets say PHP, then you have to set response header.you can search for the same.

My Server filter 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() {
        }

}

Angular - How to work with HTTPS using $http

1 Answers1