Question

所以我创建了测试API并向数据库添加了一些测试记录。

现在，当我想获取react组件中的数据时，我收到了这个错误

Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0

当我尝试console.log数据以查看它是否有效。我认为它与事实有关，我在端口8080上运行API服务器并在3000上做出反应（当我将api切换到3000并点击“后退箭头”时，我看到了一个带有数据的console.log，但是当我刷新了网站，它意识到API现在“占用”了这个URL。

我该如何解决？这是代码的重要部分，如果我需要发布更多内容，请告诉我。

API（app \ src \ apiTest \ index.js）：

const express = require('express');
const routes = require('./api.js');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');

const app = express();

//connect to mongodb
mongoose.connect('mongodb://localhost/drugDB');
mongoose.Promise = global.Promise;

//serving files (folder name)
app.use(express.static('../../../src'));

app.use(bodyParser.json());

//initialize routes
app.use('/api', routes);

//error handling middleware
app.use(function(err, req, res, next){
    res.send({error: err.message})
})



app.listen(process.env.port || 8080, function(){
    console.log('listening')
})

API中的第二个文件

const express = require('express');
const Drug = require('./models/drug');

const router = express.Router();

//get list of drugs
router.get('/leki', function (req, res) {
    Drug.find({}).then(function(drugs){
        res.send(drugs);
    })
})

router.post('/leki', function (req, res, next) {
    Drug.create(req.body).then(function (drug) {
        res.send(drug);
    }).catch(next);

})

router.put('/leki/:id', function (req, res, next) {
    Drug.findByIdAndUpdate({ _id: req.params.id }, req.body).then(function () {
        Drug.findOne({ _id: req.params.id }).then(function (drug) {
            res.send(drug);
        })
    })
})

router.delete('/leki/:id', function (req, res, next) {
    Drug.findByIdAndRemove({ _id: req.params.id }).then(function (drug) {
        res.send({ type: drug })
    });
})

module.exports = router;

反应组件（app \ src \ components \ MainPanel \ panel.js）：

componentDidMount(){
    fetch('/api/leki').then(function(data){
        console.log(data.json());
    })
}

Answer 1

该错误表明您没有收到JSON回复。这是因为您的leki端点内部正在使用res.send(drug);将数据作为HTML发送回来，请将其更改为res.json({data: drug})，然后更改为componentDidMount：

  componentDidMount(){
      fetch('/api/leki', {
        method: 'GET',
        headers: {       
             'Accept': 'application/json',
         }
      }).then(function(response){
          return response.json();
      }).then(function(data) {
        console.log(data.drug)
      })
  }

Answer 2

试试这个：

componentDidMount() {
  fetch('/api/leki')
    .then(function (resolve) { return resolve.json(); })
    .then(function (resolveJson) {
      console.log(resolveJson);
    });
}

请查看此信息以获取更多信息：

https://developers.google.com/web/updates/2015/03/introduction-to-fetch

Answer 3

您需要在后端的响应中设置标头，以允许Cross Origin requests。将此代码放在发送回复的位置：

res.set('Access-Control-Allow-Origin', 'http://localhost:3000');

试图获取我创建的API以响应组件

3 个答案: