reactjs - Google Apps Script & React.js : DELETE https://mygoogleappapi.com/exec 405 (メソッドは許可されていません)

Question

読んでくれてありがとう！現在、GAS の使用方法を学んでいます。Google スプレッドシートで選択した特定の行を削除できません。react app と google script api を使って「axios.delete メソッド」で削除しようとしたところ、テーマエラーが発生しました。

axiosを使ってGETメソッドとPOSTメソッドを渡しました。実際、Google スプレッドシートからデータを取得して投稿することができました。

削除してもうまくアクセスできませんでした。

このエラー 405 は Google シートへのアクセスが許可されていませんが、post メソッドにアクセスできるのに、なぜこのエラーが発生するのでしょうか?

アプリ スクリプトまたは react.js コードには、他のコードが必要ですか? この問題を解決できません... このエラーを解決して、選択した特定の行を削除したいです。また、このエラーの回避策を知りたいです。何か考えはありますか？いいアイデアがあれば教えてください。

読んでくれてありがとう。

これは私のアプリ スクリプト コードです。

function doDelete(req, sheet) {
   var id = req.parameter.id;

   var Row = sheet.getLastRow();
   for (var i = 1; i <= Row; i++) {
      var idTemp = sheet.getRange(i, 1).getValue();
      if (idTemp == id) {
         sheet.deleteRow(i);
      }

   }

} 

これは私のreactjsコードです。

import React,{ useState , Component } from 'react';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import axios from 'axios';

axios.defaults.baseURL = 'http://localhost:3000';
var optionAxios = {
  headers: {
      'Content-Type': 'application/json;charset=utf-8',
      'Access-Control-Allow-Origin':'*' ,
  }
}

const api = 'https://mygoogleappscriptapi.com/exec';

class  Price extends Component  {
  constructor(){
    super();
    this.state = {
      info: []
    };
    this.getInfo();
    this.createInfo = this.createInfo.bind(this);
    this.deleteInfo = this.deleteInfo.bind(this);
  };

 // accessed get!
  getInfo = () =>{
    axios.get(api)
    .then((res) =>{
      console.log(res.data)
      this.setState({
        info: res.data
      })
    })
  }


  // accessed post!
  createInfo = () =>{
    axios.post(api,{
      product: "hoge",
      price: 1000,
      miniLot: 1000,
      cartonSize: "40*30*50"
    },optionAxios)
    .then((res) => {
      this.getInfo(res);
    })
  }

  // cant't access delete!
  deleteInfo = (e) => {
    console.log(e);
   axios.delete(api,{
     id: e,
   },optionAxios)
   .then((res) =>{
     this.getInfo(res);
     console.log('success！');
   })
    
  }

  

render(){
      return (
        <div className={this.root}>
          <Grid container>
            <Grid item xs={11}>
              <button onClick={this.createInfo}>createButon</button>
                <Paper>
                   {this.state.info.map(info => <div key={info.id}>
                       {info.product}
                       <button onClick={() => this.deleteInfo(info.id)}>×</button>
                     </div>)}
                </Paper>
            </Grid>
          </Grid>
        </div>
      );
    }
}

export default Price;