Question

我的API有问题。当我使用从ReactJS提取将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});

      })
  }

这里是后端

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

问题是，每次我从前端发出请求时，这都会导致我的服务器（托管在Heroku上）崩溃...

但是，当我尝试从前端删除标头部分时，服务器不会崩溃，但不会返回任何内容...

查看日志后，我发现，当fetch的标题部分带有'Content-Type': 'application/json'时，它将在发布请求之前发送OPTIONS请求...

我的问题：如何使它正常工作？我尝试了邮递员的发帖请求，该请求有效，因此我知道我的服务器/算法不是问题。另外，后端服务器是Heroku

Answer 1

由于要在快递服务器中启用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
请注意，如果您在localhost上运行它，则可以正常工作，但是由于它托管在其他地方，因此会导致错误。

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

如何禁用获取API发送带有Content-Type标头的OPTIONS请求？

2 个答案: