Passing OPTIONS when I should Pass PUT

Question

I have the following configuration.

.config(config);

config.$inject = ["$httpProvider"];

function config($httpProvider) {
  $httpProvider.defaults.useXDomain = true;
  delete $httpProvider.defaults.headers.common["X-Requested-With"];


  //Reset headers to avoid OPTIONS request (aka preflight)
  $httpProvider.defaults.headers.common = {};
  $httpProvider.defaults.headers.post = {};
  $httpProvider.defaults.headers.put = {};
  $httpProvider.defaults.headers.patch = {};
}

As for my $resource

.factory('Order', order)

order.$inject = ['$resource', "ApiEndpoint", "UserRecord"];

function order($resource, ApiEndpoint, UserRecord) {
  var id = null;

  UserRecord.retrieve().then(function (user) {
    id = user.user_id;
  })

  return $resource(ApiEndpoint.url + 'orders.json', {}, {
    update: {method: 'PUT', url: ApiEndpoint.url + 'orders.json'}
  });
}

Now when I call update like so

var params = { name: "new name" };

Order.update(params, {}, function (resp) {
  console.log(resp);
})

My console renders No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access. The response had HTTP status code 401. as an OPTIONS request. If I run a POST request, everything works fine and as intended.

When I visit the server logs it verifies I'm running an OPTIONS request. How do I fix this to run a PUT request?

Answer 1

You are trying to make a CORS (Cross Origin Resource Sharing) request, which means that you try to connect to a server that is not your origin. Your origin is the server that serve your application.

Due to browser security policy, every request other than GET, requires a preflight handshake (OPTIONS), in which the non origin server, describes what headers, and methods he allows someone coming from origin X.

So the only way to skip preflight, is putting the resources you are accessing on the same server from which you serve the application.