JavaScript POST fetch sends as OPTIONS

Question

I am learning JavaScript, and I am making an account log-in page as a learning project. The server is using Python's Flask. The fetch function doesn't seem to be working as I want it to. For one, it is sending an options request instead of a POST, even though I specified POST. Another thing is that the server isn't receiving the data, it comes up as blank. Here is the code:

var content = JSON.stringify({'username': username, 'password': password}) //username and password are user inputs, I had them print and these work fine.
var response = fetch(url+"/api/login", {
      method: "POST",
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: content
    })
.then(response => {
  console.log("Success") //this doesn't print.
})

So sounds like you are making a cross domain call. It is doing the handshake before it posts. — epascarello, Nov 16 '21 at 17:13
https://stackoverflow.com/questions/38375124/what-is-the-reason-behind-using-option-request-before-post-on-cors-requests/38410411 — epascarello, Nov 16 '21 at 17:15

score 1 · Accepted Answer · answered Nov 16 '21 at 17:14

1

thats a preflight request

Handle the options request by passing the correct CORS Headers back.

Then also handle the post request, both of these are needed due to the new CORS standards for APIs and Websites.

answered Nov 16 '21 at 17:14

Dean Van Greunen

5,060
2
14
28

score -2 · Answer 2 · answered May 26 '23 at 00:09

I found the same problem and solved it by adding mode: "no-cors" to the options dictionary, as in:

var response = fetch(url+"/api/login", {
  method: "POST",
  mode: "no-cors",
  headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
  },
  body: content
})
.then(response => {
  console.log("Success") //this doesn't print.
})

JavaScript POST fetch sends as OPTIONS

2 Answers2