Как исправить ошибку «Непойманный (в обещании) SyntaxError: Неожиданный токен‹ в JSON в позиции 0 »ОШИБКА

После нескольких часов поиска в Интернете я не нашел решения своей проблемы. Итак, я создаю приложение CRUD с полным стеком на React и Java Spring Boot. До сих пор мне удавалось запустить загрузку бэкэнда на localhost: // 8080. Проблема возникает, когда я запускаю интерфейс React на localhost: // 3000 - ›Приложение React сохраняет загрузку и я вижу ошибку «Неперехваченный (в обещании) SyntaxError: Unexpected token‹ в JSON в позиции 0 » в консоли.

App.js:

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

class App extends Component {
state = {
isLoading: true,
groups: []
};

async componentDidMount() {
const response = await fetch('/api/groups');
const body = await response.json();
this.setState({ groups: body, isLoading: false });
} ->

получить здесь синтаксическую ошибку

render() {
const {groups, isLoading} = this.state;

if (isLoading) {
  return <p>Loading...</p>;
}

return (
  <div className="App">
    <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <div className="App-intro">
        <h2>JUG List</h2>
        {groups.map(group =>
          <div key={group.id}>
            {group.name}
          </div>
        )}
      </div>
    </header>
  </div>
);
}
}

export default App;

package.json:

{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"bootstrap": "4.1.3",
"react": "^16.14.0",
"react-cookie": "3.0.4",
"react-dom": "^16.14.0",
"react-router-dom": "4.3.1",
"react-scripts": "3.4.3",
"reactstrap": "6.5.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"proxy": "http://localhost:8080" //====>PROBLEMATIC CODE(should be outside 
 //the script block)
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
  ">0.2%",
  "not dead",
  "not op_mini all"
],
"development": [
  "last 1 chrome version",
  "last 1 firefox version",
  "last 1 safari version"
 ]
}

response.json:

{
"$id": "response.json#",
"$schema": "http://json-schema.org/draft-06/schema#",
"type": "object",
"required": [
"status",
"statusText",
"httpVersion",
"cookies",
"headers",
"content",
"redirectURL",
"headersSize",
"bodySize"
],
"properties": {
"status": {
  "type": "integer"
},
"statusText": {
  "type": "string"
},
"httpVersion": {
  "type": "string"
},
"cookies": {
  "type": "array",
  "items": {
    "$ref": "cookie.json#"
  }
},
"headers": {
  "type": "array",
  "items": {
    "$ref": "header.json#"
  }
},
"content": {
  "$ref": "content.json#"
},
"redirectURL": {
  "type": "string"
},
"headersSize": {
  "type": "integer"
},
"bodySize": {
  "type": "integer"
},
"comment": {
  "type": "string"
}
}
}

РЕШЕНИЕ:

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
 "proxy": "http://localhost:8080"

GitHub Repo


reactjs spring-boot uncaught-exception
person Alex Mo    schedule 14.10.2020    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Какой ответ возвращает вызов /api/groups? Судя по сообщению об ошибке, ответ, скорее всего, будет в формате HTML. Но он анализируется как вызов JSON (в response.json()).

Попробуйте временно изменить свой код на следующий:

const body = await response.text();
console.log(body);

Или используйте вкладку сети, чтобы проверить ответ сервера.

person redab    schedule 14.10.2020
comment
Я разместил класс group.java по запросу. Сервер возвращает синтаксическую ошибку, как указано выше в файле App.json ... - person Alex Mo; 15.10.2020
comment
Похоже, что вы опубликовали схему json (описывает структуру json). Не могли бы вы опубликовать содержимое того, что сервер фактически вернул в ответ на вызов / api / groups? Вы можете получить это, проверив запрос на вкладке сети инструментов разработчика или используя оператор журнала, как показано выше. - person redab; 15.10.2020
comment
Я бы попробовал сделать вызов / api / groups отдельно в окне браузера и сначала убедиться, что он работает. - person redab; 15.10.2020

arrow_upward
1
arrow_downward 

"proxy": "http://localhost:8080"

Вышеупомянутая строка должна быть за пределами блока Scripts ниже. Поскольку прокси-сервер не является частью скриптов, а скорее порт, который взаимодействует с сервером реакции см. подробности Как SO:

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:8080"
person Alex Mo    schedule 15.10.2020