Vue-resource: Why change my POST method to OPTIONS?

[jdbrocca]

Reproduction Link

Steps to reproduce

What is Expected?

What is actually happening?

[CarlosOV]

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

[jdbrocca]

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

[trevorhreed]

Do you have an example on Codepen or something?

[thEpisode]

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

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]

These headers...

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]

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]

umm so interesing, thanks @cre-o