Remove header properties from a POST request utilizing the $http service within an AngularJS application

Question

Remove header properties from a POST request utilizing the $http service within an AngularJS application

Within my AngularJS application, I am sending a form to a payment gateway. To pass my session token to the backend API, I have included a "Authorization" header field.

However, when attempting to send a request to the payment gateway, an error occurs:

XMLHttpRequest cannot load . Request header field Authorization is not allowed by Access-Control-Allow-Headers.

Coincidentally, the same request works perfectly fine using Postman, returning a 200 status code.

To showcase this issue, I have created a Plunker demo that also receives a 200 status http://plnkr.co/edit/8Ts6s0VDTTUVVC9dbCJC

$http({
    method: 'POST',
    url: authoriseURL,
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    },
    data: nabPaymentData
}).
success(function (response, status, headers) {
    alert('Success:' + response + ' status:' + status + ' headers:' + headers);
}).
error(function (err, status, headers) {
    alert('Error:' + err + ' status:' + status + ' headers:' + headers);
});

I am curious if there is a way to remove specific header fields for only one POST request?

javascript angularjs

Answer 1

Answer №1

If you want to selectively remove the auth header for requests to the payment gateway, using an interceptor is a good solution. Here's how you can do it: First, create the interceptor using a factory function. Then, add the interceptor to your Angular configuration.

app.factory('paymentGatewayInterceptor', ['$log', function($log) {
    return {
    // optional method
    'request': function(config) {
      $log.debug(config.url);
      // check if the request is to the payment gateway and remove the auth header
      if(config.url.indexOf('https://transact.nab.com.au') > -1) {
        $log.debug('before removing auth header');
        $log.debug(config.headers);
        delete config.headers.Authorization;
        $log.debug('after removing auth header');
        $log.debug(config.headers);
      }
      $log.debug(config.url);
      $log.debug(config.headers);
      // perform any additional actions on success
      return config;
    },


  };
}]);

app.config(['$httpProvider', function($httpProvider) {
    $httpProvider.interceptors.push('paymentGatewayInterceptor');
}]);

Answer 2

If you want to selectively remove the auth header for requests to the payment gateway, using an interceptor is a good solution. Here's how you can do it: First, create the interceptor using a factory function. Then, add the interceptor to your Angular configuration.

app.factory('paymentGatewayInterceptor', ['$log', function($log) {
    return {
    // optional method
    'request': function(config) {
      $log.debug(config.url);
      // check if the request is to the payment gateway and remove the auth header
      if(config.url.indexOf('https://transact.nab.com.au') > -1) {
        $log.debug('before removing auth header');
        $log.debug(config.headers);
        delete config.headers.Authorization;
        $log.debug('after removing auth header');
        $log.debug(config.headers);
      }
      $log.debug(config.url);
      $log.debug(config.headers);
      // perform any additional actions on success
      return config;
    },


  };
}]);

app.config(['$httpProvider', function($httpProvider) {
    $httpProvider.interceptors.push('paymentGatewayInterceptor');
}]);

Answer 3

Answer №2

To exclude the Authorization parameter from a single POST request, you can simply define it as undefined:

$http({
  method: 'POST',
  url: authoriseURL,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'Authorization': undefined
  },
  data: nabPaymentData
});

Answer 4

To exclude the Authorization parameter from a single POST request, you can simply define it as undefined:

$http({
  method: 'POST',
  url: authoriseURL,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'Authorization': undefined
  },
  data: nabPaymentData
});

Remove header properties from a POST request utilizing the $http service within an AngularJS application

Answer №1

Answer №2

Similar questions

Unable to proceed with entering subsequent values into the input field after the initial input in reactjs

What is the best way to stretch the background image across both the footer and navbar for my app?

What could be causing my JavaScript source to fail to load in an HTML document?

Illustrating an image in React-Admin sourced from a local directory with the path extracted from mongoDB

How to Handle a TypeError When Deleting a File Using GridFS with Mongoose and Node.js

Manipulating CSS styles with jQuery

Is there a way to verify whether the value of a parameter sent to a javascript function is null?

Prevent automatic merging of JSON data with identical IDs

AngularJS Textbox Stacking

Is there a way to match a string with information stored in a JSON file?

Despite population, MongooseJS still renders blank array

The ng-show directive in AngularJS seems to be malfunctioning as the <div> element remains

Guide to integrating custom fields in Wordpress with mapbox-gl js to generate map markers

Struggling to locate the element value in Puppeteer? Reach out for assistance with await page.waitForSelector() or await page.waitForXPath()

Identify modifications in the input and at the same time update another input

What type of loader is required to manage the output from these loaders?" - What specific loader should be used in this case?

What are the ways to convert canvas animations into gif or webm formats?

Update the current value in array.prototype

Using Node.js to serialize JSON POST data as an array

Utilizing OrbitControls with Socket.io in a Three.js Sphere