将数据发布到 Web 应用程序时被 CORS 策略阻止的 XMLHttpRequest答案

【问题标题】：XMLHttpRequest blocked by CORS policy when posting data to a Web App将数据发布到 Web 应用程序时被 CORS 策略阻止的 XMLHttpRequest
【发布时间】：2020-10-16 15:00:18
【问题描述】：

当我尝试通过网络应用将数据发布到我的 Google 电子表格时，我收到了 CORS 错误响应。这是我得到的错误：

从源“http://localhost:3000”访问“myGoogleSpreadSheetApiURL”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”请求的资源上存在标头。

我做了一些解决方案，我在互联网上搜索但我无法解决问题... 我已经可以从 Google 电子表格中获取我的 JSON 数据了。

当我推送我的createButton 时，我可以在我的 Google 电子表格上发布和写入我的数据。

我应该如何修复我的代码？你有什么想法吗？

这是我的 react.js 代码：

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

axios.defaults.baseURL = 'http://localhost:3000';
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8';
axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*';

const api = 'https://myGoogleSpreadSheetApiUrl';



class  Price extends Component  {
  state = {
    info: []
  };
  
  constructor(){
    super()
    axios.get(api)
    .then((res) =>{
      console.log(res.data)
      this.setState({
        info: res.data
      })
    })
  };

  createInfo = () =>{
    let res = axios.post(api,{
      id: 100,
      product: "product100",
      price: 1000,
      miniLot: 1000,
    })
    console.log(res)
  }

render(){
      return (
        <div>
              <button onClick={this.createInfo}>createButon</button>
                <Paper>
                   {this.state.info.map(info => <p key={info.id}>{info.product}</p>)}
                </Paper>
        </div>
      );
    }
}

export default Price;

这是我的 Google Apps 脚本代码：

function getData(priceDB) {
  var sheet = SpreadsheetApp.getActive().getSheetByName(priceDB);
  var rows = sheet.getDataRange().getValues();
  var keys = rows.splice(0, 1)[0];
  return rows.map(function(row) {
    var obj = {};
    row.map(function(item, index) {
      obj[String(keys[index])] = String(item);
    });
    return obj;
  });
}

function doGet() {
  var data = getData('DBprice');
  return ContentService.createTextOutput(JSON.stringify(data, null, 2))
  .setMimeType(ContentService.MimeType.JSON);
}


function doPost(e) {
  
  var ss       = SpreadsheetApp.getActiveSpreadsheet();
  var sheet    = ss.getSheetByName('DBprice'); 
  var PostData = JSON.parse(e.postData.contents);
  
  sheet.appendRow([PostData.id, PostData.product, PostData.price]);
}

【问题讨论】：

标签： reactjs google-apps-script google-sheets axios cors

【解决方案1】：

Google Apps 脚本网络应用目前仅支持以下 HTTP 方法：

POST
GET

OPTIONS 方法目前不受支持。因此，如果来自 React Web 应用的请求是 preflighted，则请求将失败（http-status-code-405）。为避免预检，请考虑将帖子正文和Content-Type 更改为以下类型之一（所谓的Simple requests）：

application/x-www-form-urlencoded
多部分/表单数据
文本/纯文本

另外，为了避免重定向到 html 页面，您应该从服务器端发送return 文本。

客户端：

axios.defaults.headers.post['Content-Type'] = 'text/plain';
/*....*/
createInfo = () =>{
 let res = axios.post(api,JSON.stringify({
  id: 100,
  product: "product100",
  price: 1000,
  miniLot: 1000,
  })
 )
//console.log(res)
}

服务器端：

function doPost(e) {
  /*Stuff*/
  return ContentService.createTextOutput("done");
}

【讨论】：