在Express的响应上反应JSON.parse语法错误

Question

我有一个简单的node.js Express服务器，如下所示：

const express = require('express');
const app = express();
const port = process.env.PORT || 5000;

app.listen(port, () => console.log(`Listening on port ${port}`));

app.get('/express_backend', (req, res) => {
  res.send({ express: 'YOUR EXPRESS BACKEND IS CONNECTED TO REACT' });
});

并在package.json中设置代理，如下所示：

"proxy": "http://localhost:5000/"

使用以下App.js文件

class App extends Component {

  constructor(){
    super();
    this.state = {data: "asdf"};
  }

  componentDidMount() {
    fetch('/express_backend')
      .then(res => res.json())
      .then(res => this.setState({data: res.express}));
  }

我正在同时运行node server.js和npm start 。

但是，当我运行它时，我在控制台中收到以下消息，该行是react-dom.development.js:26607 ：

SyntaxError：JSON.parse：JSON数据的第1行第1列出现意外字符

“ / express_backend”响应的内容为：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="/manifest.json" />
    <!--
      Notice the use of  in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  <script src="/static/js/bundle.js"></script><script src="/static/js/0.chunk.js"></script><script src="/static/js/main.chunk.js"></script></body>
</html>

如果有任何用处，我现在也可以这样做：

Source map error: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Resource URL: http://localhost:3000/
Source Map URL: ../sourcemaps/inpage.js.map

Answer 1

您将res.send替换为res.json 。
与其依赖res.json()来为您调用JSON.stringify ，请尝试显式地执行此操作：

res.json(JSON.stringify({ express: 'YOUR EXPRESS BACKEND IS CONNECTED TO REACT' }))

在Express的响应上反应JSON.parse语法错误

问题描述

1 个解决方案

解决方案1
0 2019-09-13 02:11:14

在Express的响应上反应JSON.parse语法错误

问题描述

1 个解决方案

解决方案1 0 2019-09-13 02:11:14

解决方案1
0 2019-09-13 02:11:14