google-apps-script - 尝试发送 POST 请求时，App 脚本发送 405 响应

Question

我已经使用 doPost 方法公开发布了一个应用程序脚本(任何人，甚至匿名)，如下所示，

 function doPost(e){
    var sheet = SpreadsheetApp.getActiveSheet();
    var length = e.contentLength;
    var body = e.postData.contents;
    var jsonString = e.postData.getDataAsString();
    var jsonData = JSON.parse(jsonString);
    sheet.appendRow([jsonData.title, length]);
    var MyResponse = "works";
    return ContentService.createTextOutput(MyResponse).setMimeType(ContentService.MimeType.JAVASCRIPT);
}

当我使用 Advanced Rest Client 发送带有 JSON 对象的 Post 请求时，一切正常并返回 200 OK 响应。但是，当我尝试从本地托管的 React 应用程序发送带有 react axios 的 post 请求时，它会发送 405 响应。

XMLHttpRequest cannot load https://script.google.com/macros/s/AKfycbzyc2CG9xLM-igL3zuslSmNY2GewL5seTWpMpDIQr_5eCod7_U/exec. Response for preflight has invalid HTTP status code 405

我也在浏览器中启用了跨源资源共享。发送POST请求的函数如下，

axios({
          method:'post',
          url:'https://script.google.com/macros/s/AKfycbzyc2CG9xLM-igL3zuslSmNY2GewL5seTWpMpDIQr_5eCod7_U/exec',
          data: {
            "title": 'Fred',
            "lastName": 'Flintstone'
          }
        }).then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });

Answer 1

你错过了重要的部分:

Response for preflight has invalid HTTP status code 405.

您的浏览器正在制作 preflight request ，它使用 OPTIONS HTTP 方法。这是为了检查服务器是否允许 POST请求 – 405状态代码在对 OPTIONS 的响应中发送请求，而不是您的 POST要求。

A CORS preflight request is a CORS request that checks to see if the CORS protocol is understood. ^Source

---

Additionally, for HTTP request methods that can cause side-effects on server's data (in particular, for HTTP methods other than GET, or for POST usage with certain MIME types), the specification mandates that browsers "preflight" the request, soliciting supported methods from the server with an HTTP OPTIONS request method, and then, upon "approval" from the server, sending the actual request with the actual HTTP request method.  ^Source

---

Some requests don’t trigger a CORS preflight. Those are called "simple requests" in this article [...]  ^Source
_{This article section details the conditions a request has to meet to be considered a "simple request".}

---

[...] "preflighted" requests first send an HTTP request by the OPTIONS method to the resource on the other domain, in order to determine whether the actual request is safe to send. Cross-site requests are preflighted like this since they may have implications to user data.  ^Source
_{This article section details the conditions which cause a request to be preflighted.}

在这种情况下，以下原因导致请求被预检:

[...] if the Content-Type header has a value other than the following:

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

Content-Type 的值 header 设置为 application/json;charset=utf-8通过 axios。使用 text/plain;charset=utf-8或 text/plain解决问题:

axios({
    method: 'post',
    url: 'https://script.google.com/macros/s/AKfycbzyc2CG9xLM-igL3zuslSmNY2GewL5seTWpMpDIQr_5eCod7_U/exec',
    data: {
        title: 'Fred',
        lastName: 'Flintstone',
    },
    headers: {
        'Content-Type': 'text/plain;charset=utf-8',
    },
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});