如何禁用 fetch API 以使用 Content-Type header 发送 OPTIONS 请求？

Question

我的 API 有问题。当我使用 ReactJS 的 fetch 将 un json 发送到 NodeJS 服务器时，服务器崩溃了...

提取调用：

 const jso = JSON.stringify({
        username: this.state.username,
        password: this.state.password
      })
      fetch("URL/authentication", {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: jso,
      }).then(res => res.json()).then((result) => {
        this.setState({
          answer: result.answer
        })

      }, (error) => {
        this.setState({isLoaded: true, error});

      })
  }

这里是back-end边

var express = require('express');
var app = express();
var cors = require('cors');
var bodyParser = require('body-parser')
var mysql = require("mysql");

//Enabeling all Access-Control-Allow-Origin
app.use(cors());
app.options('*', cors())

var port = process.env.PORT || 5000

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

//omitted mysql connections details

app.post('/authentication', (req, res) **=> {
    email = req.body.username,
    password = req.body.password,
    matching = "false"
    var dbpassword

    sql = "SELECT password FROM users WHERE email = ?";
    db.query(sql, email, (err, result, fields) => {
        if(err) {
            console.error('error query: ' + err.stack)
            return;
        }
        dbpassword = result[0].password;

         if(dbpassword === password){
        matching = "true";
        console.log(dbpassword + " : " + password);
        } 
        res.send({answer: matching});

    });
})

app.listen(port, function(){
    console.log("app running");
})

问题是，每当我从 front-end...

发出请求时，这会使我的服务器（托管在 Heroku 上）崩溃

但是，当我尝试从前端删除 header 部分时，服务器没有崩溃，但没有 return 任何东西...

查看日志后发现，当fetch有'Content-Type': 'application/json'的header部分时，它会在post请求之前发送一个OPTIONS请求...

我的问题：我怎样才能让它工作？我尝试了 post 人的 post 请求，它有效，所以我知道我的服务器/算法不是问题。此外，back-end 的服务器是 Heroku

Answer 1

因为您在 express 服务器中启用了 CORS，所以您需要修改您的提取调用。
添加参数mode: cors

fetch("URL/authentication", {
    method: 'POST',
    mode: 'cors', // defaults to same-origin
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      username: this.state.username,
      password: this.state.password
    })
  })

有关详细信息，请查看 Fetch API docs
请注意，如果您运行在本地主机上使用它，它会工作正常，但因为它被托管在其他地方，所以会导致错误。

Answer 2

当我的前端没有发送任何请求时，我忘了处理...

这可能并不完美，但它确实有效：

app.post('/authentication', (req, res) => {
    email = req.body.username,
    password = req.body.password,
    matching = "false"
    var dbpassword

    if(email!=""){

        sql = "SELECT password FROM users WHERE email = ?";
        db.query(sql, email, (err, result, fields) => {
            if(err) {
                console.error('error query: ' + err.stack)
                return;
            }
            if(result.length > 0){
                dbpassword = result[0].password;

                if(dbpassword === password){
                matching = "true";
                console.log(dbpassword + " : " + password);
                } 
            }

            res.send(JSON.stringify({answer: matching}));
        });
    }

    else res.send(JSON.stringify({answer: matching}));
})

如何禁用 fetch API 以使用 Content-Type header 发送 OPTIONS 请求？

how to disable fetch API to send OPTIONS request with Content-Type header?

node.js

reactjs

heroku

mysqljs