AngularJS $http.post server doesn't allow a request with method OPTIONS

Question

I am trying to do a an HTTP POST to a server.

The data I have to send is a json object.

The problem is that $http.post in angular override the method with options.

I can make this config

.config(['$httpProvider', function ($httpProvider) {
  //Reset headers to avoid OPTIONS request (aka preflight)
  $httpProvider.defaults.headers.common = {};
  $httpProvider.defaults.headers.post = {};
  $httpProvider.defaults.headers.put = {};
  $httpProvider.defaults.headers.patch = {};
}])

and changes from options to POST, but I can't set the content-type to "application/json", and I am getting a "415 Unsupported Media Type"

Thank you

Do you have control of the server you are accessing? It might not support an OPTIONS method request. You can't avoid preflight when using CORS via $httpProvider. — notbrain
– notbrain, Commented Mar 19, 2014 at 1:23

Naor · Accepted Answer · 2014-03-13 08:15:46Z

6

$http.post in angular doesn't override the method with OPTIONS. It appear that you are trying to call api in different domain than the one your JS code come from. This is called Cross Domain. For such cases the browser performs preflight request with OPTIONS in order to see the returned headers. In your backend response you should add the header Access-Control-Allow-Origin: * for example. When the browser sees that header he performs the actual POST request.

More details here: https://developer.mozilla.org/en/docs/HTTP/Access_control_CORS

Hope this is helps!

answered Mar 13, 2014 at 8:15

Naor

24.3k50 gold badges158 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

agusgambina Over a year ago

thank you, that's exactly what it is happening, but I already have the Access-Control-Allow-Origin: * in the server, and I get the same error.

Naor Over a year ago

@agusgambina: Open devtools in chrome, which exception exactly do you get in console?

agusgambina Over a year ago

The server doesn't allow CORS, so I am looking for which options I have available, one is to implement a proxy to make the requests. Thanks for the answers @Naor.

Satchel Over a year ago

@Naor how do you provide a backend response that allows the cross-domain ?

Satchel Over a year ago

@Naor I am POSTing to a POST route set up on Sinatra running on heroku

|

Vaibhav Jain · Accepted Answer · 2014-03-13 08:05:25Z

1

Add

$httpProvider.defaults.headers.post['Content-Type'] = 'application/json';

But note this will set the Content-Type header globally.

If you need to set the content-type per call, you should use $http.post like

 $http.post("/foo/bar", requestData, {
        headers: { 'Content-Type': 'application/json'},
        transformRequest: transform
    }).success(function(responseData) {
        //do stuff with response
    });

answered Mar 13, 2014 at 8:05

Vaibhav Jain

34.6k49 gold badges117 silver badges167 bronze badges

3 Comments

agusgambina Over a year ago

thank you for the reply. I tried both, put it globally and local in the function, but the same result, change the request method to options.

notbrain Over a year ago

Shouldn't have to do this, the default for $http.post is application/json. See /docs/api/ng/service/$http for your version, search for 'Setting HTTP Headers'.

AceMark Over a year ago

this actually worked for me. had to use $http.post(url, data) instead of $http({ method: 'POST', data: data })

Collectives™ on Stack Overflow

AngularJS $http.post server doesn't allow a request with method OPTIONS

2 Answers 2

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related