pagekit / vue-resource

The HTTP client for Vue.js
MIT License
10.08k stars 1.6k forks source link

Why change my POST method to OPTIONS? #686

Open jdbrocca opened 6 years ago

jdbrocca commented 6 years ago

Reproduction Link

Steps to reproduce

What is Expected?

What is actually happening?

CarlosOV commented 6 years ago

Probably your method is not changing to OPTIONS, but Chrome makes an OPTIONS request before making the POST request

jdbrocca commented 6 years ago

But is weird, because when I use vanilla js, works fine and don't make that change.

trevorhreed commented 6 years ago

Do you have an example on Codepen or something?

thEpisode commented 6 years ago

Same error and CORS problem (like some many people here): image

Code (headers is a proposal from another user in #692 ):

this.$http
          .post(
            $Flinger.paths.apiBase + $Flinger.paths.clientEarly,
            {
              name: name,
              email: email,
              phone: phone
            },
            {
              headers: {
                "Access-Control-Allow-Origin": "*",
                "Access-Control-Allow-Methods":
                  "POST, GET, PUT, OPTIONS, DELETE",
                "Access-Control-Allow-Headers":
                  "Access-Control-Allow-Methods, Access-Control-Allow-Origin, Origin, Accept, Content-Type",
                "Content-Type": "application/json",
                Accept: "application/json"
              },
              emulateJSON: true
            }
          )
          .then(response => {
            /* this.message = response.data.message; */
            console.log(response);
          });
trevorhreed commented 6 years ago

These headers...

Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers

..are response headers, and they must be sent by the server, not the client. Your example code above is sending them as part of the request, but they have no effect in a request.

I'd recommend reading this article on CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

cre-o commented 5 years ago

Everyone who have this issue can read this post https://dev.to/effingkay/cors-preflighted-requests--options-method-3024 and this https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

In short: if request have Content-type: 'application/json', then CORS policy will be accepted and OPTION request will be also generated

thEpisode commented 5 years ago

umm so interesing, thanks @cre-o