Question

我有一个运行React的前端。这是我调用API的代码

componentDidMount(){
      const jso = JSON.stringify({
        username: 'admin@etsmtl.ca',
        password: 'admin'
      })
      fetch("https://desolate-escarpment-15258.herokuapp.com/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});

      })
  }

现在这是来自nodeJS服务器的代码

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

//setting port
var port = process.env.PORT || 5000

//helps node to pasre JSON
app.use(bodyParser.json());

//Enabeling all Access-Control-Allow-Origin
app.use(cors());

app.get('/', function(req, res){
    res.send({answer: "hello world!"});
})

app.post('/authentication', function(req, res){
    console.log(req.body);
    res.send({answer: req.body});
})

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

问题：nodeJS无法处理来自React的请求。

我现在两个服务器之间的连接都可以工作了，因为当我在nodeJS中执行res.send("hello Wolrd");时，我可以收到答案

仅供参考，nodeJS由heroku托管，而reactJS由AWS S3托管。但是我们在本地尝试过，但都没有效果

Answer 1

实际上，我找到了一种方法！基本上，我们需要防止使用url ...

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

//setting port
var port = process.env.PORT || 5000

//helps node to pasre JSON
/*LINE BELOW HAS BEEN ADDED TO PREVENT USE OF URL*/
app.use(bodyParser.urlencoded({ extended: false })); 
app.use(bodyParser.json());

//etc...

Answer 2

在componentDidMount（）中，body设置为jso。更改为body: json Perharps可能有效。

像这样app.use(cors())设置app.use(cors( {origin: '*' }));

还有一个类似的问题，当我处于构建模式时，我可以在后端访问数据库，但是当我上传到子域（Netlify）时，它就可以正常工作。

它在Netlify中对我不起作用，但是您应该尝试看看我这可能在heroku中起作用。

nodeJS无法从React API接收请求

2 个答案: