http - JavaScript POST fetch sends as OPTIONS - Stack Overflow

admin管理员组

文章数量:1327460

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 es 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.
})

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 es 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.
})

• javascript
• http
• post
• fetch-api

Share Improve this question Follow edited Jul 8, 2023 at 8:21 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Nov 16, 2021 at 17:11 helleelhelleel 4311 silver badge55 bronze badges 2

• 1 So sounds like you are making a cross domain call. It is doing the handshake before it posts. – epascarello Commented Nov 16, 2021 at 17:13
• stackoverflow./questions/38375124/… – epascarello Commented Nov 16, 2021 at 17:15

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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.

Make sure to use cors if you want a proper response... Here's how I would do it. The request was fine but the .then() was not good for console.logging...

var response = fetch(url+"/api/login", {
  method: "POST",
  mode: "cors",
  headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
  },
  body: content
})
.then(r => r.text().then(console.log));

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

本文标签： httpJavaScript POST fetch sends as OPTIONSStack Overflow