Google Apps Script & React.js : DELETE https://mygoogleappapi.com/exec 405 (Method Not Allowed)

Question

Thank you for reading! I am learning how to use GAS now, I can't delete the specific row I selected on google spread sheet. I got the theme error after trying to delete using "axios.delete method" when I used react app and google script api.

I already passed GET method and POST method using axios. Actually , I could get and post my data from my google spread sheet.

but deleting could not access well.

I found this error 405 is not allowed to access my google sheet, but Why can I get this error even though the post method was accessible?

My App script or My react.js code need to have any code else ? I can't solve this problem... I want to solve this error and delete the specific row I selected. Also, I want to know a workaround for this error. Do you have any idea ? If you have some good idea,Could you tell me please ?

Thank you for reading.

this is my App script code.

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

   }

} 

this is my reactjs code.

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;

Answer 1

Only the following HTTP methods are supported:

• POST
• GET

DELETE method is not supported by google-apps-script-web-application.

You can use post:

Server side:

function doPost(e){
  if(e.parameter.option === "DELETE") return doDelete(e);
  /*rest of doPost here*/
}

React:

  // convert to axios.post
  deleteInfo = (e) => {
    console.log(e);
   axios.post(api,{//modified
     id: e,
     option: "DELETE",//added
   },optionAxios)
   .then((res) =>{
     this.getInfo(res);
     console.log('success！');
   })
    
  }