如何修复“未捕获（承诺中）语法错误：位置 0 处 JSON 中出现意外标记 <”错误

Question

经过几个小时的网络搜索后，我还没有找到解决我的问题的方法。所以我正在 React 和 Java Spring Boot 上构建一个全栈 CRUD 应用程序。到目前为止，我已经能够在 localhost://8080 上运行后端存储启动。当我在 localhost://3000 上运行前端 React 时出现问题 -> React 应用程序不断加载并且我看到\xe2\x80\x9cUncaught （承诺中） SyntaxError: Unexpected token < in JSON at 位置 0\xe2\x80\ x9d控制台中的错误。

\n

应用程序.js：

\n

import React, { Component } from \'react\';\nimport logo from \'./logo.svg\';\nimport \'./App.css\';\n\nclass App extends Component {\nstate = {\nisLoading: true,\ngroups: []\n};\n\nasync componentDidMount() {\nconst response = await fetch(\'/api/groups\');\nconst body = await response.json();\nthis.setState({ groups: body, isLoading: false });\n} ->\n

\n

此处出现语法错误

\n

render() {\nconst {groups, isLoading} = this.state;\n\nif (isLoading) {\n  return <p>Loading...</p>;\n}\n\nreturn (\n  <div className="App">\n    <header className="App-header">\n      <img src={logo} className="App-logo" alt="logo" />\n      <div className="App-intro">\n        <h2>JUG List</h2>\n        {groups.map(group =>\n          <div key={group.id}>\n            {group.name}\n          </div>\n        )}\n      </div>\n    </header>\n  </div>\n);\n}\n}\n\nexport default App;\n

\n

包.json：

\n

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

\n

响应.json：

\n

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

\n

解决方案：

\n

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

\n

GitHub 存储库

\n

Answer 1

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

尝试暂时将代码更改为以下内容：

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

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

Answer 2

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

上面的行应该位于下面的脚本块之外。因为“代理”不是脚本的一部分，而是与反应服务器通信的端口，请参阅详细信息，如下所示：

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