Javascript 为什么我收到意外令牌错误<；在JSON中的位置0

我正在创建一个MERN应用程序，我是新来的。我试图在网上学习一些教程，但遇到了一些错误

我像这样提交帖子请求。正如您所看到的，我没有指定内容类型，因为我知道如果您使用“多部分/表单数据”，它将自动将其附加到标题中。我在这里使用的是react钩子，这就是为什么我没有直接使用fetch方法

const formData = new FormData();
formData.append("email", formState.inputs.email.value);
formData.append("name", formState.inputs.name.value);
formData.append("password", formState.inputs.password.value);
formData.append("image", formState.inputs.image.value);
const responseData = await sendRequest(
    `${process.env.REACT_APP_BACKEND_BASE_URL}/api/users/signup`,
    "POST",
    formData
    );

同时，我的注册路径是这样的，在user routes.js下

router.post(
  "/signup",
  fileUpload.single("image"),
  [
    check("name").not().isEmpty(),
    check("email")
      .normalizeEmail() // Test@test.com => test@test.com
      .isEmail(),
    check("password").isLength({ min: 6 }),
  ],
  usersController.signup
);

您也可以看到，我通过使用

fileUpload.single（“image”）

如果你需要看看我的钩子，我在这里使用它，但我非常肯定，钩子工作良好。它没有任何问题，所以这里是：这是一个react hook

export const useHttpClient = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState();

  const activeHttpRequests = useRef([]);

  const sendRequest = useCallback(
    async (url, method = "GET", body = null, headers = {}) => {
      setIsLoading(true);
      const httpAbortCtrl = new AbortController();
      activeHttpRequests.current.push(httpAbortCtrl);

      try {
        const response = await fetch(url, {
          method,
          body,
          headers,
          signal: httpAbortCtrl.signal,
        });

        const responseData = await response.json();

        // console.log("Response: ", response);
        // console.log("Data: ", responseData);

        activeHttpRequests.current = activeHttpRequests.current.filter(
          (reqCtrl) => reqCtrl !== httpAbortCtrl
        );

        if (!response.ok) {
          throw new Error(responseData.message);
        }

        setIsLoading(false);
        return responseData;
      } catch (err) {
        setError(err.message);
        setIsLoading(false);
        throw err;
      }
    },
    []
  );

  const clearError = () => {
    setError(null);
  };

  useEffect(() => {
    return () => {
      // eslint-disable-next-line react-hooks/exhaustive-deps
      activeHttpRequests.current.forEach((abortCtrl) => abortCtrl.abort());
    };
  }, []);

  return { isLoading, error, sendRequest, clearError };
};

我将在此处包括我的用户的注册。controller：

const signup = async (req, res, next) => {
  const errors = validationResult(req);
  if (!errors.isEmpty()) {
    return next(
      new HttpError("Invalid inputs passed, please check your data.", 422)
    );
  }

  const { name, email, password } = req.body;

  let existingUser;
  try {
    existingUser = await User.findOne({ email: email });
  } catch (err) {
    const error = new HttpError(
      "Signing up failed, please try again later.",
      500
    );
    return next(error);
  }

  if (existingUser) {
    const error = new HttpError(
      "User exists already, please login instead.",
      422
    );
    return next(error);
  }

  let hashedPassword;
  try {
    hashedPassword = await bcrypt.hash(password, 12);
  } catch (err) {
    const error = new HttpError(
      "Could not create user, please try again.",
      500
    );
    return next(error);
  }

  //res.json({ message: "AFTER HASHING" });

  const createdUser = new User({
    name,
    email,
    image: req.file.path,
    password: hashedPassword,
    places: [],
  });

  try {
    await createdUser.save();
  } catch (err) {
    const error = new HttpError(
      "Signing up failed, please try again later.",
      500
    );
    return next(error);
  }

  let token;
  try {
    token = jwt.sign(
      { userId: createdUser.id, email: createdUser.email },
      process.env.JWT_KEY,
      { expiresIn: "1h" }
    );
  } catch (err) {
    const error = new HttpError(
      "Signing up failed, please try again later.",
      500
    );
    return next(error);
  }

  res
    .status(201)
    .json({ userId: createdUser.id, email: createdUser.email, token: token });
};

---

您可能希望在响应数据周围使用

JSON.Parse（）

当我遇到这个错误是因为我

• 已解析已解析的对象
• 刺痛一根绳子
• 将字符串用作对象

这将更深入地介绍bug和剖析问题的常用方法

---

在发送数据之前，请在钩子中尝试console.log（），并记录responseData在检索数据后的外观

实际上返回的是HTML而不是JSON。您必须收到HTTP错误，例如404。等待承诺解析后，

const response

的结果不是JSON字符串。所以这是失败的

const responseData=wait response.json（）

@Mr.polywhill no我没有返回任何html，我从这里了解到，如果您发送的内容类型为“多种形式”，而您提交的数据是json对象，则会遇到这种情况，以下是URL:@IvanApungan有一种非常简单的方法可以找到：查看浏览器开发人员工具（以下简称“网络”选项卡）。请注意，正如Polywhill先生所说，无论您的代码是否返回HTML，您的服务器都可以返回HTML格式的错误。@Pointy是的，他是正确的，似乎服务器返回的是HTML或文本类型，但我不知道在注册过程中哪里出错了，我假设问题出在multer身上。我使用multer进行上传files@Pointy信息技术似乎我部署的服务器返回的内部服务器错误状态代码为500，我在注册函数的每个场景中都使用了try-catch，但错误就在其中。我认为错误甚至在进入注册块之前就发生了，可能是在我在user-routes.jsIf

响应中导入的fileupload.js文件中。json（）

抛出语法错误，然后它这样做是因为它已经将响应主体传递给了

json.parse（）

。