Angular2 Http PUT gives wrong RequestMethod

Question

I can't understand why I can't use http put in Angular2.

When I'm doing http post, it give the correct request method:

However, when I use http put: it give OPTIONS as the request method:

I meant what the heck is this?

Here is the method that I'm using for post:

  let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
  let options = new RequestOptions({ headers: headers });
  var body = 'amount=' + 12;
  this.http.post(this.host + '/orders', body, options)
  .map(res => res.json())
  .subscribe(data => {
    resolve('success')
  });

Here is the method that I'm using for PUT.

  let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
  let options = new RequestOptions({ headers: headers });
  let body = 'amount=' + 12;
  this.http.put(this.host + '/orders/1', body, options)
  .map(res => res.json())
  .subscribe(data => {
    resolve('success')
  })

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

I think that it's because of CORS. It's not related to Angular2. In the case of your POST method, a simple method will be executed. In the case of PUT, you're in the case of a preflight one so an additional request (an OPTIONS one) will be involved under the hood by the browser. And it seems that you have 404 on this OPTIONS method.

As a reminder:

Simple requests. This use case applies if we use HTTP GET, HEAD and POST methods. In the case of POST methods, only content types with the following values are supported: text/plain, application/x-www-form-urlencoded and multipart/form-data.

Preflighted requests. When the "simple requests" use case doesn’t apply, a first request (with the HTTP OPTIONS method) is made to check what can be done in the context of cross-domain requests.

I think that these articles could interest you:

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 10, 2016 at 10:24

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

2 Comments

Vicheanak Over a year ago

But I tested in the update method with Postman, it works fine, also in my server, express, I have enabled all of these: res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type'); res.setHeader('Access-Control-Allow-Credentials', true);

Thierry Templier Over a year ago

Yes, but with Postman, you are in a Chrome plugin so you can have fewer restrictions. That's great for the CORS headers on the server side. But it's not enough regarding CORS preflight requests. You should use the cors module in your express application: github.com/expressjs/cors#enabling-cors-pre-flight (globally or per request).

Collectives™ on Stack Overflow

Angular2 Http PUT gives wrong RequestMethod

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related