XMLHttpRequest blocked by CORS policy when posting data to a Web App

Question

I get a CORS error response when I tried to post my data to my Google Spreadsheet via a Web App. This is the error I get:

Access to XMLHttpR

Answer 1

Only the following HTTP methods are supported by Google apps script web- application currently:

• POST
• GET

OPTIONS method is currently not supported. So, if requests from your React web-app is preflighted, the requests will fail(http-status-code-405). To avoid preflighting, consider changing the post body and Content-Type to one of the following types(so called Simple requests):

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

Also, In order to avoid redirection to a html page, you should return text from the server side.

Client side:

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

Server side:

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