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

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;

3个回答

wzhuwzhu
wzhuwzhu 多谢回复!之前看了这个帖子,按里面说的改了package.json里"start": "... --ignore client",可还是不行。是不是springboot maven reactjs在一起用产生冲突?谢谢了!
接近 2 年之前 回复

cmd.exe启动tomcat后不再报错了,谢谢了!但是页面还是报错,可能是js写的也有问题

wzhuwzhu
wzhuwzhu 还是需要在package.json里设置"start": "set PORT=8080 && react-scripts start --ignore client"
接近 2 年之前 回复

图片说明


```[百度](www.baidu.com "请点击")

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐