How to set headers in Ajax call?

Question

I am developing multi-language website using Angularjs and a Web api as backend. I am trying to send RequestedPlatform and RequestedLanguage in the header whenever I make an API call.

Below is my Ajax request call.

$http.post(url,RegistrationData).then(function (response) {
                   var pageList = response.data.ID;
                   toastr.success('', 'Registered Succesfully');
                   $state.go('Registration.OTPVerification', { pageList });
               }, function (error) {
                   toastr.error('', 'Error Occured');
               });

updated code

var RegistrationData = {
                   FirstName: $scope.user.Fname,
                   LastName: $scope.user.Lname,
                   Password: $scope.user.password,
                   Gender: "Male",
                   DateOfBirth: "2017-04-04",
                   Nationality: $scope.user.selectedGlobe,
                   Mobile_CountryCod: "91",
                   MobileNumber: $scope.user.mobilenumber,
                   EmailId: $scope.user.email,
                   Home_Location: $scope.user.homeLocation,
                   Home_City: $scope.user.homeCity,
                   Home_Neighbourhood: $scope.user.homeNeighbourhood,
                   Home_HouseNumber: $scope.user.housenumber,
                   Home_MainStreet: $scope.user.homemainstreet,
                   Home_SubStreet: $scope.user.homesubstreet,
                   Work_Location: $scope.user.worklocation,
                   Work_City: $scope.user.workcity,
                   Work_Neighbourhood: $scope.user.workNeighbourhood,
                   Work_HouseNumber: $scope.user.workhousenumber,
                   Work_MainStreet: $scope.user.workmainstreet,
                   Work_SubStreet: $scope.user.worksubstreet
               };
               var req = {
                   method: 'POST',
                   url: url,
                   data: { RegistrationData: RegistrationData },
                   headers: {
                       RequestedPlatform: "Web",
                       RequestedLanguage: "English"
                   }
               }
               $http(req).then(function (response) {
                   var pageList = response.data.ID;
                   toastr.success('', 'Registered Succesfully');
                   $state.go('Registration.OTPVerification', { pageList });
               }, function () {
                   toastr.error('', 'Error Occured');
               });

May I get some help to set headers in Ajax. Any help would be appreciated.

score 1 · Answer 1 · answered Apr 11 '17 at 12:46

There are few ways and I have posted one which I have been using it for a while. I hope you are looking for the below

$http.post('test', data, {
        withCredentials : false,
        transformRequest : angular.identity,
        headers : {
            'Content-Type' : undefined
        }
})

xkeshav · Accepted Answer · 2017-04-11T12:53:13.013

1

you can send headers with headers property of $http

var req = {
 method: 'POST',
 url: 'http://example.com',
 headers: {
   'Content-Type': undefined
 },
 data: { test: 'test' }
}

$http(req).then(function(){...}, function(){...});

and if you want headers for all the requests that can be fully configured by accessing the $httpProvider.defaults.headers configuration object,

Reference

edited Apr 11 '17 at 12:53

answered Apr 11 '17 at 12:46

xkeshav

53,360
44
177
245

Thanks. I updated my code. I am able to make request but data is not submitting. Any idea? – Niranjan Godbole Apr 11 '17 at 13:10
if you are sending custom headers then you need to configure on the server side to allow and accept [custom headers](http://stackoverflow.com/questions/3561381/custom-http-headers-naming-conventions) – xkeshav Apr 12 '17 at 06:54

How to set headers in Ajax call?

2 Answers2