Angularjs $http send OPTIONS instead PUT

Question

I know that the browser first send an OPTIONS to the server. But I'm facing this thing in Angularjs 1.5. I'm trying to send a PUT request and it is sending an OPTIONS. Why is this weird?, because I'm using an application to test all my urls and the url works fines using PUT.

let fd = new FormData()
let d
for (d in $scope.uploadAutos) {
  fd.append(d, $scope.uploadAutos[d])
}

$http({
     method: 'PUT',
    url: `http://sitio.api.com/vehiculo/${parseInt($routeParams.id, 10)}`,
    data: fd,
    headers: { 'Content-Type': 'undefined' }
   }).then(success => {
     console.log(success)
   }, error => {
     console.log(error)
  }
)

this is, so far, the way I've been working doing GET and POST request, which works fine...but with PUT...mmm something is not working. The backend is right for what a said above, that using a rest api application to test all my url, the PUT url works fine. Any help would be great :). thanks

If the response to the OPTIONS request that returns is OK, then the code should correctly send your PUT request after that. Can you check what is the response of the backend to this OPTIONS request? — Jakub Rusilko
– Jakub Rusilko, Commented Oct 3, 2016 at 18:41

nikjohn · Accepted Answer · 2016-10-03 18:45:10Z

3

Ideally you would see two requests - the OPTIONS request i.e. the pre-flight request. This is to verify your Cross Origin request headers.

Once this is verified, your client will be able to make the actual POST/PUT request. If your pre-flight request is failing that means that your CORS request headers aren't set properly on your server.

The following headers need to be set:

Access-Control-Allow-Origin
Access-Control-Allow-Methods ("GET, POST, PUT, DELETE, OPTIONS")
Access-Control-Allow-Headers
Access-Control-Max-Age

answered Oct 3, 2016 at 18:45

nikjohn

22.1k16 gold badges58 silver badges88 bronze badges

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

Comments

Diego Molina · Accepted Answer · 2016-10-03 19:08:52Z

That's the word i was looking for pre-flight!! lol. Ok I've got the things working. First. there was a lack of info from my side. So I realized that the issue is not in angular, not in my backend, the issue is in the doc of slim php and in my knowledge. Whe you use PUT or DELETE into a map function, you have to add the OPTIONS, this is because

Mozilla has the answer

The Cross-Origin Resource Sharing standard works by adding new HTTP headers that allow servers to describe the set of origins that are permitted to read that information using a web browser. Additionally, for HTTP request methods that can cause side-effects on user data (in particular, for HTTP methods other than GET, or for POST usage with certain MIME types), the specification mandates that browsers "preflight" the request, soliciting supported methods from the server with an HTTP OPTIONS request method, and then, upon "approval" from the server, sending the actual request with the actual HTTP request method. Servers can also notify clients whether "credentials" (including Cookies and HTTP Authentication data) should be sent with requests.

Collectives™ on Stack Overflow

Angularjs $http send OPTIONS instead PUT

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related