我正在浏览这个教程https://learn.microsoft.com/en-us/learn/modules/build-web-api-minimal-spa/5-exercise-create-api
它会一直工作到这一步：通过打开package.json和以下条目添加代理：

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

字符串
现在，当我重新运行yarn start时，相同的页面不会呈现在http：//localhost：5000上，但是如果我从package.json中删除代理行，它仍然呈现在http：//localhost：3000上。
我在控制台中看到这些错误：

manifest.json:1          GET http://localhost:5000/%PUBLIC_URL%/manifest.json 404 (Not Found)
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
The attempt to bind "/%PUBLIC_URL%/manifest.json" in the workspace failed as this URI is malformed.

型
在HTML中，我看到：

<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>

型
当我删除package.json中的代理条目时，我也会在html中得到这个：

<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
  <div class="App">
    <div>No pizzas</div>
  </div>
</div>

型
这是我的包。json：

{
  "name": "pizza-web",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.0",
    "styled-components": "^5.3.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "resolutions": {
    "styled-components": "^5"
  }
}

型
我的Main.js：

import React, { useEffect, useState } from "react";
import styled from "styled-components";

const PizzaFrame = styled.div`
    border: solid 1px gray;
    padding: 10px;
    margin: 15px 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px grey;
    font-family: Arial;
`;

const Input = styled.input`
    border: solid 1px black;
    padding: 5px;
    border-radius: 3px;
`;

const Title = styled(Input)`
    text-transform: uppercase;
`;

const Save = styled.button`
   width: 100px;
   margin: 10px;
   background: green;
   color: white;
   font-size: 16px;
   padding: 10px;
   border-radius: 5px;
`;

const Pizza = ({ pizza }) => {
   const [data, setData] = useState(pizza);
   const [dirty, setDirty] = useState(false);

   function update(value, fieldName, obj) {
   setData({ ...obj, [fieldName] : value });
   setDirty(true);
   }

   function onSave() {
   setDirty(false);
   // make REST call
   }

   return (<React.Fragment>
     <PizzaFrame>
     <h3>
       <Title onChange={(evt) => update(evt.target.value, 'name', data)} value={data.name} /> 
     </h3>
     <div>
       <Input onChange={(evt) => update(evt.target.value, 'description', data)} value={data.description} />
     </div>
     {dirty ? 
      <div><Save onClick={onSave}>Save</Save></div> : null
     }
    </PizzaFrame>
    </React.Fragment>)
}

const Main = () => {
  const [pizzas, setPizzas] = useState([]);
  useEffect(() => {
    fetchData();
  }, [])

  function fetchData() {
    fetch("/api/pizza")
      .then(response => response.json())
      .then(data => setPizzas(data))
  }

  const data = pizzas.map(pizza => <Pizza pizza={pizza} />)

  return (<React.Fragment>
    {pizzas.length === 0 ?
    <div>No pizzas</div> :
    <div>{data}</div>
    }
  </React.Fragment>)
}

export default Main;

型