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?
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');