javascript - axios put 不发生投掷禁止

问题描述

我是 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)
  };

标签： javascripthtmlreactjsapiaxios

由于您尝试通信不同的域，因为CORS浏览器会自动发送 OPTIONS 请求。并且后端并不期望这一点，因此无论出于何种原因它都会返回 403。

考虑到您的需求

要么更改您的客户端代码以使请求简单
将您的客户端代码放置在后端运行的同一个域上
将 CORS 代理服务器作为托管客户端代码的同一域运行 - 因为 OPTIONS aka preflight 请求仅由浏览器发送，因此您在 Node 中的代码不需要
更新目标后端代码以正确处理预检 OPTIONS 请求

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

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

javascript - axios put 不发生投掷禁止

问题描述

解决方案

推荐阅读