How to remove authorization header from request [duplicate]

Question

I'm using MEAN Stack User Registration and Login Example & Tutorial as the base for my app. It adds an auth header to every request in the run function:

$http.defaults.headers.common['Authorization'] = 'Bearer ' + $window.jwtToken;

I want to upload images to Cloudinary but I'm getting this error:

XMLHttpRequest cannot load https://api.cloudinary.com/v1_1/xxxx/upload. Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

How can I remove this header specifically for requests to Cloudinary?

Answer 1

You will require an interceptor that checks for the url of the request and clears the header if it matches. alternatively you can use the $http config parameter.

Using the parameter:

$http.post('https://api.cloudinary.com/v1_1/' + someId + '/upload', data, { headers: {} });

Using an interceptor:

.factory('cloudinaryInterceptor', function() {
 return {
  request: function(config){
   //Check for the host
   var regex = /api\.cloudinary\.com/i;
   if(regex.test(config.url))
    //Detach the header
    delete config.headers.authorization;
   return config;
  }
 }
});

Remember to push the interceptor in the config phase

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