Send HTTP Header Requests with AngularJS

Question

I am trying to send a HTTP GET request to a remote server and use the response on an HTML page. Below is the project/js/script.js page

    var app = angular.module('app', ['ngResource']);

    var config = {
        url:"www.myWebsite.com/discover",
        headers:  {
            "X-Object-Header" : "123456789 ",
            "Content-Type": "application/json"
        }
    };
    app.controller('discoverObjectCtrl', ['$scope', '$http', function (scope, http) {
        console.log('Everything Works!');

    http.get("/object", config).success(function (data) {
        scope.object = data;

    });
    console.log(scope.object);
}]);

In my response header, this is what I get

Remote Address:127.0.0.1:63342

Request URL:localhost:63342/object

Request Method:GET

Status Code:404 Not Found

---

Request Headers

---

Accept:application/json, text/plain, /

Accept-Encoding: gzip,deflate,sdch

Accept-Language:en-US,en;q=0.8

Cache-Control:max-age=0

Connection:keep-alive

Host:localhost:63342

Referer: localhost:63342/DemoSP/index.html

User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36

X-Object-Header: 123456789

What I would like to do is send the http request with a customized URL. So for instance I would like my console Header to display

Request URL:www.myWebsite.com/discover/object

And not

Request URL:localhost:63342/project/www.myWebsite.com/discover/object

Please I need Help on this. Thanks

Answer 1

You should configure the get like this:

$http.get("www.myWebsite.com/discover/object", {
    headers: {
        "X-Object-Header" : "123456789",
        "Content-Type": "application/json"
    }
}).success(...);

But you will run into CORS issues since the requested domain is not the same as the one where the current script is housed. You would either need to enable www.myWebsite.com to be queried in your server environment through the Access-Control-Allow-Origin headers or if you can change the www.myWebsite.com/discover/object endpoint then make it a JSONP endpoint which you can query through $http.jsonp.

See also this answer.

Answer 2

What you are actually doing is cross domain Ajax call. There are some typical solutions you can choose:

• JSONP, use $http.jsonp for AngularJs

• Serve side proxy, which avoid to access different domain

• Use 'Access-Control-Allow-Origin' header

  Here are some links which can help you:

• AngulaJS jsonp

• Cross Origin $http with Angular JS

Answer 3

HttpIntercepter can be used for adding common headers as well as common parameters.

Add this in your config :

$httpProvider.interceptors.push('UtimfHttpIntercepter');

and create factory with name UtimfHttpIntercepter

    angular.module('utimf.services', ['ngResource', 'ng.deviceDetector'])
    .factory('UtimfHttpIntercepter', UtimfHttpIntercepter)

    UtimfHttpIntercepter.$inject = ['$q', '$cookieStore', '$location', '$timeout', '$rootScope',  'appConfig', 'Encrypt', 'appText', 'myDevice'];
    function UtimfHttpIntercepter($q, $cookieStore, $location, $timeout, $rootScope, appConfig, Encrypt, appText, myDevice) {
    var authFactory = {};

    var _request = function (config) {
        config.headers = config.headers || {}; // change/add hearders
        config.data = config.data || {}; // change/add post data
        config.params = config.params || {}; //change/add querystring params            

        return config || $q.when(config);
    }

    var _requestError = function (rejection) {
        // handle if there is a request error
        return $q.reject(rejection);
    }

    var _response = function(response){
        // handle your response
        return response || $q.when(response);
    }

    var _responseError = function (rejection) {
        // handle if there is a request error
        return $q.reject(rejection);
    }

    authFactory.request = _request;
    authFactory.requestError = _requestError;
    authFactory.response = _response;
    authFactory.responseError = _responseError;
    return authFactory;
}