SyntaxError:位置 0 Express 的 JSON 中的意外标记

我正在尝试按照本教程( https://levelup.gitconnected.com/introduction-to-express-js-a-node-js-framework-fa3dcbba3a98 )通过 .我有一个 server.js 脚本正在运行,它连接到我的 ip、端口 3000 上的客户端 (App.tsx)。服务器和应用程序在不同终端的同一设备上同时运行。服务器能够很好地接收 GET 请求,因为当应用程序启动时,useEffect 函数调用 GET 请求,服务器发送一条消息。但是,我的 POST 请求(包含设置为 JSON.stringify("hello world") 的内容主体)不起作用。每当我按下按钮时,服务器脚本都会返回以下错误:

SyntaxError: Unexpected token h in JSON at position 0
    at JSON.parse (<anonymous>)
...

我假设我发送的是格式错误的 json,或者没有正确设置内容类型,但我无法找出确切的问题。

App.tsx(其中 myip 是我的 IP 地址):

import { StatusBar } from 'expo-status-bar';
import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View, ScrollView, TouchableOpacity, TextInput } from 'react-native';

export default function App() {
  const [response, setResponse] = useState();
  useEffect(() => {
    fetch("http://myip:3000/get")
     .then(res => res.json())
     .then(res => console.log(res.theServer))
   }, []);

  async function handleSubmit() {
    console.log('button press');
    const response = await fetch("http://myip:3000/wow/post", {
      method: "POST",
      headers: {
      "Content-Type": "application/json"
      },
      body: JSON.stringify("hello world")
    });
  const body = await response.text();
  setResponse({ responseToPost: body });
  }

  return (
  <View style={styles.container}>
  <TouchableOpacity onPress={handleSubmit}>
     <Text>Submit</Text>
  </TouchableOpacity>
  </View>
}
...
});

服务器.js

const express = require("express");
const bodyParser = require("body-parser");
const app = express();
const port = process.env.PORT || 3000;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.get("/get", (req, res) => {
  res.send({ theServer: "hElLo FrOm YoUr ExPrEsS sErVeR" });
});
app.post("/wow/post", (req, res) => {
  console.log(req.body);
  res.send(`Here is what you sent me: ${req.body.post}`);
});
app.listen(port, () => console.log(`listening on port ${port}`));
stack overflow SyntaxError: Unexpected token in JSON at position 0 Express
原文答案
author avatar

接受的答案

首先,停止使用 body-parser。 Express有自己的请求体解析中间件。

app.use(express.json())
app.use(express.urlencoded()) // extended = true is the default

JSON 解析中间件默认配置为处理对象。虽然像 "hello world" 这样的字符串文字是有效的 JSON,但它不是框架所期望的,因此是您的错误。

由于您似乎正在尝试访问 req.body.post ,因此您应该使用这样的结构发送数据

fetch("http://myip:3000/wow/post", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ post: "hello world" })
})

或者,如果您确实想发布 JSON 字符串文字,则需要像这样配置 JSON 中间件

app.use(express.json({ strict: false }))

strict

启用或禁用仅接受数组和对象;禁用时将接受 JSON.parse 接受的任何内容。

在这种情况下,您的 "hello world" 字符串将出现在 req.body


答案:

作者头像

对我来说,添加

  res.header('Access-Control-Allow-Origin', '*');

解决了问题

相关问题