reactjs无法连接后台：Could not proxy request xxx from localhost:3000 to http://localhost:8080/

Question

package.json写了“proxy”:"http://localhost:8080"
下面是App.js里component StaffList.js代码，cnpm start后console显示异常：
Proxy error: Could not proxy request /api/staffs from localhost:3000 to http://localhost:8080/.
另外页面报错：
Unhandled Rejection (SyntaxError): Unexpected token P in JSON at position 0
出错是这一句： .then(response => response.json())

应该是连接不到后台的Controller？毫无头绪，应该怎么解决？谢谢了！！

 class StaffList extends Component {
  constructor(props) {
    super(props);
    this.state = {staffs: [], isLoading: true};
    this.remove = this.remove.bind(this);
  }

  componentDidMount() {
    this.setState({isLoading: true});

    fetch('api/staffs')
      .then(response => response.json())
      .then(data => this.setState({staffs: data, isLoading: false}));
  }

  async remove(id) {
    await fetch(`/api/staff/${id}`, {
      method: 'DELETE',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    }).then(() => {
      let updatedStaffs = [...this.state.staffs].filter(i => i.id !== id); 
      this.setState({staffs: updatedStaffs});
    });
  }

  render() {
    const {staffs, isLoading} = this.state;

    if (isLoading) {
      return <p>Loading...</p>;
    }

    const staffList = staffs.map(staffManagement => {
      return <tr key={staffManagement.id}>
        <td style={{whiteSpace: 'nowrap'}}>{staffManagement.name}</td>
        <td>
          <ButtonGroup>
            <Button size="sm" color="primary" tag={Link} to={"/staffs/" + staffManagement.id}>Edit</Button>
            <Button size="sm" color="danger" onClick={() => this.remove(staffManagement.id)}>Delete</Button>
          </ButtonGroup>
        </td>
      </tr>
    });

    return (
      <div>
        <AppNavbar/>
        <Container fluid>
          <div className="float-right">
            <Button color="success" tag={Link} to="/staffs/new">Add Staff</Button>
          </div>
          <h3>Staff Management</h3>
          <Table className="mt-4">
            <thead>
            <tr>
              <th width="20%">Name</th>
              <th width="20%">Department</th>
              <th>Position</th>
              <th width="10%">Permission</th>
            </tr>
            </thead>
            <tbody>
            {staffList}
            </tbody>
          </Table>
        </Container>
      </div>
    );
  }
}

export default StaffList;

Answer 1

反正vue如果是前后台都在同一个机器上启动的话，changeOrigin跨越配置需要配置成false，如果是true，跟你的问题一样。你可以看看是不是这个原因。