vue-resource icon indicating copy to clipboard operation
vue-resource copied to clipboard

Why change my POST method to OPTIONS?

Open jdbrocca opened this issue 6 years ago • 7 comments

Reproduction Link

Steps to reproduce

What is Expected?

What is actually happening?

jdbrocca avatar Apr 02 '18 17:04 jdbrocca

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

CarlosOV avatar Apr 02 '18 19:04 CarlosOV

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

jdbrocca avatar Apr 02 '18 19:04 jdbrocca

Do you have an example on Codepen or something?

trevorhreed avatar Apr 04 '18 19:04 trevorhreed

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);
          });

thEpisode avatar May 30 '18 04:05 thEpisode

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

trevorhreed avatar May 30 '18 21:05 trevorhreed

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

cre-o avatar Jan 13 '19 22:01 cre-o

umm so interesing, thanks @cre-o

thEpisode avatar Jan 17 '19 04:01 thEpisode