如何修复“未捕获承诺SyntaxError：JSON中位置0处的意外令牌<”错误

如何解决如何修复“未捕获承诺SyntaxError：JSON中位置0处的意外令牌<”错误

经过数小时的网上搜索，我仍未找到解决问题的方法。所以我正在React和Java Spring Boot上构建一个全栈CRUD应用程序。到目前为止，我已经能够在localhost：// 8080上运行后端soring引导。当我在localhost：// 3000上运行前端React时，会出现问题-> React App保持loading并且我看到“未捕获（承诺）SyntaxError：意外令牌控制台中的错误。

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","eject": "react-scripts eject"
},"proxy": "http://localhost:8080"

GitHub Repo

解决方法

/api/groups调用返回的响应是什么？根据错误消息，响应可能是HTML格式。但是它被解析为JSON（在response.json()中）调用。

尝试将您的代码临时更改为以下内容：

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

或使用“网络”标签检查服务器的响应。

,

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

上一行应位于下面的“脚本”块之外。因为“代理”不是脚本的一部分，而是一个与React Server see details对话的端口，就像SO：

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