Google Apps 脚本 & React.js：删除 https://mygoogleappapi。com/exec 405（方法不允许）

Question

感谢阅读！我正在学习如何使用 GAS，我无法删除在 google 传播 sheet 上选择的特定行。当我使用 React 应用程序和 google 脚本 api.

时，尝试使用“axios.delete 方法”删除后出现主题错误

我已经使用 axios 通过了 GET 方法和 POST 方法。实际上，我可以从我的 google 传播 sheet.

中获取和 post 我的数据

但是删除无法正常访问

我发现这个错误 405 is not allowed to access my google sheet，但是为什么即使 post 方法可以访问，我也会得到这个错误？

我的应用程序脚本或我的 react.js 代码还需要其他代码吗？我无法解决这个问题... 我想解决这个错误并删除我选择的特定行。另外，我想知道这个错误的解决方法。你有什么主意吗？如果你有什么好主意，可以告诉我吗？

感谢您的阅读。

这是我的 App 脚本代码。

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;

Answer 1

试试这个：

function doDelete(req, sh) {
  var id = req.parameter.id;
  const ss=SpreadsheetApp.getActive();
  sh=sh||ss.getActiveSheet();
  var vs=sh.getRange(1,1,sh.getLastRow(),1).getValues();
  var d=0;
  for (var i=0;i<vs.length;i++) {
    if (vs[i][0]== id) {
      sh.deleteRow(i+1-d++);
    }
  }
}

Answer 2

仅支持以下 HTTP 方法：

POST
GET

DELETE 方法不受 google-apps-script-web-application 支持。

您可以使用 post:

服务器端：

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

反应：

  // 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！');
   })
    
  }

Google Apps 脚本 & React.js：删除 https://mygoogleappapi。com/exec 405（方法不允许）

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

rowdeleting

google-apps-script

reactjs

axios