CODEWITHSUNDEEP
javascriptangularjshttp-headershttprequesthttp-get
AllJs
AllJs

Reputation: 1810

Send HTTP Header Requests with AngularJS

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

Upvotes: 1

Views: 5294

Answers (3)

Prasanth Bendra
Prasanth Bendra

Reputation: 32820

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;
}

Upvotes: 0

Artjom B.
Artjom B.

Reputation: 61952

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.

Upvotes: 1

Wenbing Li
Wenbing Li

Reputation: 12982

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

Upvotes: 1

Related Questions