reactjs - 如何修复 “Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0” 错误

Question

在网上搜索了几个小时后，我还没有找到解决我的问题的方法。所以我正在 React 和 Java Spring Boot 上构建一个全栈 CRUD 应用程序。到目前为止，我已经能够在 localhost://8080 上运行后端 soring 启动。当我在 localhost://3000 上运行前端 React 时出现问题 -> React App 保留 loading &我看到 “未捕获( promise )语法错误:意外的 token < JSON 中的位置 0”控制台中的错误。
应用程序.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;

包.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"
 ]
}

响应.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

Answer 1

/api/groups返回的响应是什么？称呼？根据错误消息，响应很可能是 HTML 格式。但它被解析为 JSON(在 response.json() 中)调用。
尝试暂时将您的代码更改为以下内容:

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

或者使用网络选项卡检查服务器的响应。