react fetch Uncaught (in promise) SyntaxError: Unexpected end of input

333
10 марта 2018, 21:19

Есть react приложение, которое должно делать запрос на ip, результат примерно такой:

[
{
    "id": 1,
    "date": "2018-03-07",
    "from_place": "from",
    "to_place": "to",
    "url": "http://localhost:8000/api/methods/flights/1/",
    "airplane": "http://localhost:8000/api/methods/airplanes/1/",
    "price": 100,
    "ticket_set": [
        "http://localhost:8000/api/methods/tickets/2/",
        "http://localhost:8000/api/methods/tickets/3/",
        "http://localhost:8000/api/methods/tickets/4/",
        "http://localhost:8000/api/methods/tickets/5/",
        "http://localhost:8000/api/methods/tickets/6/",
        "http://localhost:8000/api/methods/tickets/7/",
        "http://localhost:8000/api/methods/tickets/8/",
        "http://localhost:8000/api/methods/tickets/9/",
        "http://localhost:8000/api/methods/tickets/10/",
        "http://localhost:8000/api/methods/tickets/11/",
        "http://localhost:8000/api/methods/tickets/12/",
        "http://localhost:8000/api/methods/tickets/13/",
        "http://localhost:8000/api/methods/tickets/14/",
        "http://localhost:8000/api/methods/tickets/15/",
        "http://localhost:8000/api/methods/tickets/16/",
        "http://localhost:8000/api/methods/tickets/17/",
        "http://localhost:8000/api/methods/tickets/18/",
        "http://localhost:8000/api/methods/tickets/19/"
    ]
}
]

Однако при запросе выдает ошибку:

getFlights.js:23 Uncaught (in promise) SyntaxError: Unexpected end of input
at getFlights.js:23
at <anonymous>

Код запроса:

import React from "react";
import FlightListItem from "../items/FlightListItem";
class Flights extends React.Component {
    state = {
        flights: []
    }
componentDidMount() {
    const ip = require('ip');
    const apiUrl = 'http://' + ip.address() + ':8000/api/methods/flights.json/';
    const param = {
        method: 'GET',
        mode: 'no-cors',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Authorization': 'Bearer: token',
        },
    };
    return fetch(apiUrl, param)
        .then(response => response.json())
        .then(data => this.storeFlights(data))
}
storeFlights = data => {
    const flights = data.results.map(result => {
        const {id, from_place, to_place, date, url, airplane, price} = result;
        return {id, from_place, to_place, date, url, airplane, price};
    });
    this.setState({flights})
};

render() {
    return (
        <section>
            <ul className="flights">
                {
                    this.state.flights.map(flight => (
                        <FlightListItem key={flight.id} flight={flight}/>
                    ))
                }
            </ul>
        </section>
    )
  }
}
export default Flights;
Answer 1

Проблема была в mode: 'no-cors', нужно было добавить Access-Control-Allow-Origin в бекенде.

READ ALSO
JavaScript Раскодировать BSON в JSON

JavaScript Раскодировать BSON в JSON

Есть строка в формате BSON (закодированная в base64), как раскодировать ее в JSON-строку?

244
this в стрелочной функции при работе с DOM

this в стрелочной функции при работе с DOM

Не могу понять, почему стрелочная функция иначе работает с thisПростой пример:

198
jQuery: добавление стилей на страницу

jQuery: добавление стилей на страницу

ЗдравствуйтеЯ подключаю стили к своему веб-приложению с помощью js

305