我想从服务器获取文件，然后使用 react js 在浏览器中显示（文件作为响应来自服务器）

Question

**WHAT I WANT TO DO IS FETCH A FILE FROM SERVER BY SENDING FILE NAME THROUGH BODY AND THEN GET ASKED FILE FROM SERVER **

I AM GETTING FILE IN RESPONSE FROM SERVER I TESTED IN POSTMAN

WHAT I WANT TO DO IS FETCH THE FILE RESPONDED BY SERVER AND THEN DISPLAY IT IN BROWSER using react-js

THIS IS WHAT I AM DOING TO FETCH FILE FROM SERVER

frontend code

import { useEffect, useState } from "react";
const CardArticle = ({ cardData:cardComponent }) => {
  const [Data, setdata] = useState(null);


useEffect(() => {
    fetch("http://localhost:8000/article", {
      method: "post",
      headers: { "content-Type": "application/json" },
      body: JSON.stringify({fileName: "cardArticle.html"}),
}).then((res) => res.json())
  .then((data) => setdata(data))
  .catch(console.log("not found"))});

  if (Data === null) return;

  return (
    <div>{Data}<div>hello it's working</div></div>
  );
};
export default CardArticle;

IT GIVES ME ERROR: Uncaught (in promise) SyntaxError: Unexpected token '<', "<.DOCTYPE "... is not valid JSON

I DON'T KNOW HOW TO DO IT SO I TRIED SOMETHING AND CAN'T FIGURE IT OUT HOW IT WILL WORK

Backend code

app.post("/article", (req, res) => {
  try {
    const { fileName } = req.body;
    if (fileName === undefined) {
      return res.status(404).json("file not found");
    }
    res.sendFile(path.join(__dirname, `/${fileName}`));
  } catch (err) {
    res.json("Something went wrong!");
  }
});

Answer 1

i think your content-type is wrong because files are not json and you can't convert them. one way is to use multipart/form-data content type and then convert it with javascript formData