APIを取得しようとしましたコンポーネントを反応させるために作成しました

Question

私はテストAPIを作成し、DBにテストレコードをほとんど追加しませんでした。私はデータをフェッチしたかった今

は、私はそれが動作するかどうかを確認するために、データをCONSOLE.LOGしようとすると、私はこのエラー

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

を得ているコンポーネントを反応させます。私はそれが事実と関係があると思っています。ポート8080でAPIサーバを実行し、3000にアプリケーションを反応させます（私は3000にAPiを切り替え、 "back arrow"をクリックしたときにconsole.logにデータが見えました。私は、APIがこのURLを「占有」していることを認識したサイトをリフレッシュしました）。

どうすれば修正できますか？ここにコードの重要な部分があります。もし私がもっとポストする必要があれば私に教えてください。

API（アプリケーション\ SRC \ APITEST \ index.js）：APIで

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

2ファイル

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 \コンポーネント\ MainPanel \ panel.js） ：

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

Answer 1

これを試してみてください：

詳細については、この時

ルック：

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

Answer 2

エラーはあなたが戻って応答したJSONを受けていないことを示唆しています。どのcomponentDidMountの内部で、次にHTMLとして戻ってデータを送信し、あなたがres.send(drug);を使用しているあなたのlekiエンドポイントの内部には、res.json({data: drug})に変更しているためケースですと：

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

Answer 3

あなたはあなたのヘッダを設定することにより、Cross Origin requestsを許可する必要がありますバックエンドの応答。 置き、あなたの応答を送信し、このコード：

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