Question

我是axios的新手。
- 我正在尝试通过put请求对我的api进行更新。但是我收到以下错误。选项http://t/Sports/1 403（禁止）
- 我对axios进行了很多研究，但仍然无法解决问题
- 你能告诉我如何解决它吗？
- 在下面提供我的代码段

<div className={classes.SportsEditTabContentFooter}>

    <div>Sports Status</div>
    <div>
        <Button variant="outlined" className={classes.button}>
        Cancel
                </Button>
        <Button variant="outlined" onClick={this.saveSports} className={classes.button}>
        Save Sports test
                </Button>
    </div>
</div>

  saveSports = () => {
    console.log("saveSports---->");
    console.log(this.state.Sports);
    let saveSports = this.state.Sports;
    saveSports.updatedBy = 'raj';
    saveSports.priceRuleDescription = "test description";

    axios
      .put(
      'http://t/Sports/' + saveSports.SportsID,
      saveSports,
      { headers: { 'Content-Type': 'application/json' } }
      )
      .then(r => console.log(r))
      .catch(e => console.log(e));

    //this.toggleDrawer("right", false);
    this.setState({ right: false });
    this.setState({ snackBarOpen: true });
    setTimeout(() => {
      this.setState({ snackBarOpen: false });
    }, 6000)
  };

Answer 1

由于CORS，由于您尝试通信其他域，浏览器会自动发送OPTIONS请求。后端不希望这样做，因此无论出于何种原因它都会返回403。

请记住您的需求

可以更改您的客户代码以制作request simple
将您的客户端代码放置在后端运行的同一域上
在托管客户端代码的域中运行CORS代理服务器-由于OPTIONS aka预检请求仅由浏览器发送，因此您在Node中的代码不需要这样做
更新目标后端代码以正确处理预检OPTIONS请求

每个变体足以解决您的问题。但是由您自己决定哪种情况更方便

PS，以防万一：没有，无法避免通过配置axios，用不同的软件包，fetch()调用或本机XmlHttpRequest替换axios或其他任何简单更改来避免发送预检OPTIONS请求在您的客户端代码中，因为它是现代Web浏览器的基本（安全！）功能

axios禁止将其扔掉

1 个答案: