$http POST call in angularjs returns HTTP status code 405

Question

I try to make a POST call from a javascript client to a foursquare API called addvenue. This the API endpoint documentation link.
But the server returns 405 - Method not allowed. Here is the snippet making the call

var postdata = {'oauth_token':$scope.access_token_foursquare,
                        'v':'20141217','name':'randomlisting',
                        'll':'44.3,37.2','m':'foursquare'};
var req = {
            method: 'POST',
            url: 'https://api.foursquare.com/v2/venues/add',
            headers: {
              'content-type': 'application/x-www-form-urlencoded'
            },
            data: postdata
          }

$http(req).then(function(response){
      console.log(response);
           });

Following is the Request and response packet for the above call.

Remote Address:103.245.222.185:443
Request URL:https://api.foursquare.com/v2/venues/add
Request Method:OPTIONS
Status Code:405 Method Not Allowed

**Request Headers**
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, authorization, content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:api.foursquare.com
Origin:http://localhost:9000
Referer:http://localhost:9000/foursquare
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36

**Response Headers**

Accept-Ranges:bytes
Access-Control-Allow-Origin:*
Connection:Keep-Alive
Content-Length:90
Content-Type:application/json; charset=utf-8
Date:Wed, 17 Dec 2014 12:15:15 GMT
Keep-Alive:timeout=10, max=50
Server:nginx
Tracer-Time:1
Via:1.1 varnish
X-Cache:MISS
X-Cache-Hits:0
X-Served-By:cache-sn87-SIN

I also studied about CORS issue. In my case the server is allowing all origins, as seen in the response headers. I am struck with this issue and could not proceed further.

Any help would be appreciated. Thanks in advance.

Answer 1

Request Method:OPTIONS

The client is making a pre-flight OPTIONS request to the server.

An OPTIONS request is automatically made by the browser before making a non-simple (e.g. not a GET) cross domain (CORS) request.

The purpose of the OPTIONS request is a quick check with the server to ensure that the client is permitted to make the POST before actually making the POST. Thus the client makes 1 or 2 requests.

An OPTIONS request and if the OPTIONS request responds with success (not a 405) then make the POST.

The OPTIONS request is failing most likely because you have not stated in your server response that your server supports OPTIONS requests.

Add this header to your server response ..

Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS

Then it should all work.

See https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests for more info