Question

快速服务器中的提取源（＆＃39; wx＆＃39;）正在返回： 未处理的拒绝（SyntaxError）：意外的令牌＆lt;在位置0的JSON中 在下面的获取行。＆＃39; wx＆＃39;的获取来源返回404.（虽然这是最终设置为气象服务，但此处的任何测试都返回404）。

这是React：

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  state = {wx: []}

  componentDidMount() {
    fetch('/wx').then(res => res.json()).then(wx => this.setState({ wx }));
  }

  render() {
    return (
      <div className="App">
        <h1>Weather</h1>
        {this.state.wx.map(weather =>
          <div key={weather.id}>{weather.main}>{weather.description}</div>
        )}
      </div>

    );
  }
}

export default App;

这是路线wx.js：

var express = require('express');
var app = express();
var router = express.Router();
var request = require('request');
var bodyParser = require('body-parser');
var methodOverride = require('method-override');

    app.get('/', function(req, res){

        request({
                url: 'http://jsonplaceholder.typicode.com', //URL to hit
                method: 'POST'

            }, function(error, response, body){
                if(error) {
                    console.log(error);
                } else {
                    console.log(body);
                }
            });

            res.send(body);
    }); 

    module.exports = router;

为什么这会返回404，我该怎么办呢？

Answer 1

听起来你忘记在package.json中设置代理端口，以便返回html。我有同样的问题，我只是想在我的package.json中设置我的代理：“proxy”：“http://localhost:3001”，

Answer 2

您的错误与您收到的404错误有关。 res.json()尝试将响应的主体转换为JSON对象，但由于响应是HTML文档，因此失败了。

您可以做的是在返回json之前检查响应是否成功。

fetch('/wx').then(res => {
  if(res.status === 200) return res.json();
  else return { error: 'there was an error with response' }
}).then(wx => {
  if(wx.error) { /* handle error here */ }
  else {
    this.setState({ wx })
  }
});

React App无法解析获取路由：未处理的拒绝（SyntaxError）：意外的令牌＆lt;在位置0的JSON中

2 个答案: