Request header field Content-Type is not allowed by Access-Control-Allow-Headers AngularJS

Question

I am working on an API module that makes CORS requests to the service endpoint:
https://github.com/gigablox/angular-blitline-api

See the demonstration here:
http://plnkr.co/FjnJbHQHG5MM7P0VbtV6

You will notice when the API call is made I receive the following error message:
Request header field Content-Type is not allowed by Access-Control-Allow-Headers

I've open sourced a few of these API modules before for --- Imgur, Mandrill, and Blogger --- but this is the first time I've ever seen this problem using Blitline.

Is there an issue in my code or does the service provider not like the way the request is being sent to them because of some AngularJS $http convention?

I was able to find a related topic however the solution provided did not work.
delete $httpProvider.defaults.headers.common['X-Requested-With'];
Feel free to try it with that plunker --- I should note I am using 1.1.5

Looks like you need to add a `Access-Control-Request-Headers: Content-Type` header with your request. Are you doing so? — apsillers, Jul 08 '13 at 13:49
@moderndegree That's just some plunker wierdness, but the controllers are definitely being hit or that ajax call would never go out that you can observe in your `console.log()` — Dan Kanze, Jul 08 '13 at 13:50
I believe the 404 is because you have this: in your html. doesn't appear to be related. — Brian Lewis, Jul 08 '13 at 13:51
@apsillers If you take a look at the request headers, that is being sent. I believe the error message describes this as the problem. — Dan Kanze, Jul 08 '13 at 13:53
@moderndegree Your'e right. I had a larger example but I slimmed it down, I cut it out now. — Dan Kanze, Jul 08 '13 at 13:54
Try clearing your cache in order to get beyond the CORS issues. — Brian Lewis, Jul 08 '13 at 13:58
have you seen this project? https://github.com/blitline-dev/blitline_javascript_lib — Brian Lewis, Jul 08 '13 at 18:11
@moderndegree Yes, but AngularJS already handles CORS with it's own conventions. That lib also has a jQuery dependency --- something AngularJS doesn't need to make API calls nor do I want to add an additional 30kb to my project. — Dan Kanze, Jul 08 '13 at 18:26

Brian Lewis · Accepted Answer · 2013-07-08T15:51:30.560

Update

Your plnkr worked for me... sort of. I get the following response:

{"results":"Sorry, 'json' key expected in post data. For example { \"json\": \"{...}\" }. Please check the Blitline examples."}

According to the docs:

A job is a collection of 1 or more functions to be performed on an image. Data submitted to the job api must have a key of "json" and a value that is a string. The string must contain properly formatted JSON.

You should be submitting your POST in a format like this:

angular.module('myApp', ['blitline'])

.config(['$blitlineGlobalProvider', function($blitlineGlobalProvider) {
  $blitlineGlobalProvider.options({
        json: '{"application_id": "YOUR_ID","version": 2,"src": "http://cdn.blitline.com/filters/boys.jpeg","functions": [{"name": "resize_to_fit","params": {"width": 240,"height": 140},"save": {"image_identifier": "external_sample_1"}}]}'
    });
}])

.controller('blitlineTest', ['$scope', '$blitlineJob', function($scope, $blitlineJob) {
    var blitlineJob = $blitlineJob.blitlineJob();
    blitlineJob.job(function(job) {
        console.log(job);
    });
}]);

Here is an updated plnkr: http://plnkr.co/edit/qV7sEf?p=preview

Bitline has a working example on their site You can see it here: http://www.blitline.com/docs/sample

I didn't have to change anything. I suspect there is a caching issue. Try clearing your cache and try it again. — Brian Lewis, Jul 08 '13 at 14:02
After speaking with their support, without an API key the error message doesnt return back well in plunker so it was unclear what was going on. The convention you are using above is absolutely correct. — Dan Kanze, Jul 09 '13 at 13:46

Request header field Content-Type is not allowed by Access-Control-Allow-Headers AngularJS

1 Answers1