HTTPのステータスコードが200だけどCORSのエラーが出る理由

Question

前提・実現したいこと

問い合わせフォームに入力されたデータを非同期でGoogle スプレッドシートに送りたいと考えています。
そこでJavascriptのfetchを使い、POSTでデータを送信しGASが実行されスプレッドシートに書き込む処理を
作成しました

しかし処理自体は書き込みに成功し、HTTPのステータスコードも200が返ってきているのに
fetchの処理でCORSのエラーが発生しており、エラーハンドリングされます。

そこでCORSのエラーを解消し、正常処理のステップに進むにはどうすればいいのか
また、ステータスコードが200でもエラーになるのはよくあることなのですか
教えていただきたいです。

発生している問題・エラーメッセージ

Access to fetch at 'GASで作成したAPIのURL' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

該当のソースコード

ajaxButton.addEventListener('click', function () {
let name = document.forms.google_form.name.value;
let hurigana = document.forms.google_form.hurigana.value;
let email = document.forms.google_form.email.value;
let msg = document.forms.google_form.msg.value;
const params = new URLSearchParams();
params.set('name', name);
params.set('hurigana', hurigana);
params.set('email', email);
params.set('msg', msg);

const url = "GASで作成したAPIのURL";

const headers = new Headers({
  'Content-Type': 'application/x-www-form-urlencoded',
})

const data = {
  method: 'POST',
  headers: headers,
  body: params,
  mode: "cors"
}

debugger;

 fetch(url, data)
 .then(function (response) {
   if(response.ok) {
      console.log('正常終了しました');
    }
 })
 .catch(function (error) {
   console.log(error.message);
   console.log(error.stack);
 })
});

function doPost(e) {
  var ss = SpreadsheetApp.openById('シートが存在するURL');
  var sheet = ss.getSheetByName("シート1");

  var name = e.parameter.name;
  var hurigana = e.parameter.hurigana;
  var email = e.parameter.email;
  var msg = e.parameter.msg;
  
  // データ入力
  sheet.appendRow([name, hurigana, email, msg]);

試したこと

modeをno-cors指定にすると処理は正常に終了するけど空のレスポンスが返ってきて
.thenの処理で中身を確認することができなかった。

Answer 1

「CORS」や「Access-Control-Allow-Origin」を調べてください、で終わる話ではありますが、エラーの原因と対処方法を簡単に書いておきます。

エラーの原因は、API のレスポンスヘッダーに Access-Control-Allow-Origin がないためです。
JavaScript ではセキュリティ上の理由で、アクセス許可がないレスポンスは取得できないようになっています。
ちなみに、HTML と API が同一オリジンであればこのヘッダーは不要なので、その場合はあまり気にする必要のない話です。

JavaScript側だけでは対処不可能であり、API側でレスポンスに Access-Control-Allow-Origin のヘッダーを適切に指定するか、HTML と API を同一オリジンに移動させるかが必要です。

Comments

[nozomiiii]

ありがとうございます。
レスポンスにAccess-Control-Allow-Originのヘッダーを適切に指定できる方法を探してみます。

Answer 2

HTTPのステータスコードが200だけどCORSのエラーが出る理由

HTTPのステータスコードはWebサーバーが返します。
CORSのエラーかどうかはWebブラウザが判定します。

よって、Webサーバーの処理が正常に終了しレスポンスを返す場合はHTTP ステータスコードは200となります。このレスポンスをブラウザが受けて、ブラウザがCORSのエラーにするかどうか決めます。

Comments

[nozomiiii]

ありがとうございます。
webサーバもwebブラウザの違いがあったのですね！
勉強になりました。

Answer 3

Stackoverflowでこのようなスレッド1, スレッド2を見つけました。質問者様のGoogle Apps Scriptのスクリプトが途中で切れているため、これが直接の原因かどうかわかりませんが、もしもdoPost()が何も返していないようであれば、doPost()の最後に次のスクリプトを入れてみるのはいかがでしょうか。

return ContentService.createTextOutput("ok");

• スクリプトを修正した際は、Web Appsを新しいバージョンで再デプロイしてから動作確認してください。これにより最新のスクリプトがWeb Appsへ反映されます。

Comments

[nozomiiii]

処理が正常に終了していなかったことが原因みたいでした。
一度上記のようなコードを追加した際もCORSのエラーがでたことは確認しています。

[kisojin]

既に試していたとのことで、気付かず申し訳ありません。お役に立てず申し訳ありませんでした。

Answer 4

GASの処理は正常に終了した場合レスポンスにAccess-Control-Allow-Origin: *を自動で付与してくれるみたいです。
異常の場合、Access-Control-Allow-Origin: *　がヘッダーに付与されず、CORSのエラーが出ます。
今回の場合、処理が異常と判定されていたのはデータの送信部分と思われます。

const params = new URLSearchParams();
params.set('name', name);
params.set('hurigana', hurigana);
params.set('email', email);
params.set('msg', msg);

としていた部分を

let form_data = new FormData(document.getElementById("formのID名"));
form_data.append('name', name);
form_data.append('hurigana', hurigana);
form_data.append('email', email);
form_data.append('msg', msg);

に変更

  'Content-Type': 'application/x-www-form-urlencoded',
})

としていた部分を削除しました。

こうすることでdoPostの処理が正常に終了して、エラーハンドリングされなくなりました。

Answer 5

Fetch APIでデータを得るアプローチが間違いなので、GASのAPIを調べてください。

var ss = SpreadsheetApp.openById('シートが存在するURL');

openById() の第一引数に指定できるのはIDですが、必要としているのは、URLなのでは？

• openById(id)  |  Apps Script  |  Google Developers
• openByUrl(url)  |  Apps Script  |  Google Developers

Re: nozomiiii さん

Comments

[nozomiiii]

ありがとうございます。
スプレッドシートに書き込むことは成功しているのでシートの取得はできているのかなと思っています。
一度URLに変えて試してみます。