JavascriptからGASのサーバースクリプトにリクエストするとblocked by CORS policyエラーが出てしまう

Question

GASでGoogle翻訳の翻訳結果を返すスクリプトを作成してデプロイしました。
コードは以下のとおりです。

function doGet(e) {
  var p = e.parameter;
  var translatedText = LanguageApp.translate(p.text, p.source, p.target);
  return ContentService.createTextOutput(translatedText);
}

ブラウザでデプロイ先のURLを叩けば翻訳結果が返ってくるのですが
javascriptで書いたコードでリクエストすると、
「has been blocked by CORS policy: Response to preflight request doesn't pass access control check:」
というエラーが返ってきてしまします。
javascriptのコードは以下のとおりです。

fetch(GASのURL,
    {
        method: 'GET',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Access-Control-Allow-Origin': '*'
        },
        
    })
    .then((res) => {
レスポンスの処理
});

色々調べたのですが、
・サーバー側（GAS)から返すのはオブジェクトをそのままではなく ContentService.createTextOutputで変換しなければならない
・Content-Typeにapplication/x-www-form-urlencodedを設定してリクエストする
・axiosを使用し、crossDomain: trueというオプションをつける。
などやってみましたが、どれもうまくいきません。WordPressサイトなのでサーバーサイドからPHPでcurlコマンドを叩くという選択肢もあるのですが、できればフロントエンドで完結させたいのです。

どなたか解決策をご教示いただけないでしょうか？

Comments

[penguin520]

javascript で、GASに　GETできればいいですか？？？それとも、翻訳結果がでるようになのであれば、火曜くらいまでに、ちょっと調べてみようかと思います。

[penguin520]

ちなみに　javascript で、GASに　GETはしにいけます。過去に実装したことがあるので。
昔のコードをいま見ているのですが、すぐに掲載できそうにないので時間がかかります。

[ITmaroon]

お忙しいところ恐れ入ります。急ぎませんので教えていただけると大変助かります。目的はJavascript側で翻訳結果を受け取りたいのです。よろしくお願いいたします。

Answer 1

Access-Control-Allow-Origin': '*'を削除してみてください。

fetch(GASのURL,
    {
        method: 'GET',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          //  'Access-Control-Allow-Origin': '*'
        },
        
    })
    .then((res) => {
レスポンスの処理
});

Answer 2

javascriptで書いたコードでリクエストすると、「has been blocked by CORS policy: Response to preflight request doesn't pass access control check:」

fetch API を使ったようですが、その場合クロスオリジンになって CORS に引っかかったのでしょう。jQuery ajax とか、直に XMLHttpRequest を使っても同じです。

その場合はサーバー側で CORS 対応する必要があり、フロントエンドで fetch API や XMLHttpRequest を使っている限りは何ともなりません。

---

【追記】

下のコメント欄の 2023/02/04 11:08 の私のコメントで「あとで回答欄に詳細を追記しておきます」と書いた件です。

クロスドメインからブラウザに実装された JavaScript の fetch で要求をかけると、ブラウザが自動的に CORS に対応した要求を出します。

要求が単純なリクエストでない場合は事前にプリフライトリクエストを出します。ブラウザはプリフライトリクエストの応答を見て再度要求を出してデータを取得するという仕組みになっています。

詳しくは以下の記事とか CORS でググってヒットする記事を見てください。

CORS(Cross-Origin Resource Sharing)
https://www.tohoho-web.com/ex/cors.html

質問者さんの fetch のコードには、単純なリクエストの条件から外れるヘッダを追加する 'Access-Control-Allow-Origin': '*' があるのでプリフライトリクエストが出ます。

下の画像は質問者さんの fetch のコードと同じものを使ったときの要求・応答を Fiddler というツールを使ってキャプチャしたものです。

CORS に適切な要求を出すのはブラウザの仕事で、ブラウザが単純なリクエストになるか否かを判断し、単純なリクエストでないと判断した場合は自動的にプリフライトリクエストを出します。上の画像の赤枠で示したプリフライトクエストに必要なヘッダを含めるのもブラウザの仕事です。

上の画像でプリフライトリクエストの HTTP 動詞が OPTIONS になっているのに注目してください。

GAS は GET と POST だけしか受け付けないそうなので、プリフライトリクエストが出たのでは何ともならないはずです。

ググって調べただけで定かではないですが、GAS は単純なリクエストであれば処理できるという記事を目にします。なので、プリフライトリクエストが出ないように（単純なリクエストになるように）して試してみてはいかがでしょう。

質問の fetch のコードの 'Access-Control-Allow-Origin': '*' をコメントアウトすれば、以下の通り単純な要求になります。

プリフライトリクエストなしで即 GET 要求が出ています。赤枠で示した CORS に必要なヘッダもブラウザが追加してくれます。

サーバー側が CORS に対応していれば、青枠で示したような CORS 対応の応答ヘッダが返ってきて、ブラウザはそれを見てコンテンツを取得します。

Comments

[ITmaroon]

回答ありがとうご合います。サーバー側を触ってみようと思います。

[退会済みユーザー]

「gas cors」をキーワードにググっただけですが、プリフライトリクエストが送られると（HTTP 動詞が OPTIONS になる）、それに対応してないのでダメと言う記事を目にします。可能かどうかわかりませんが、プリフライトリクエストが出ないように（単純なリクエストととなるように）送信してみてはいかがでしょう。

[退会済みユーザー]

質問者さんの fetch のコードを検証してみましたがプリフライトリクエストが出ます。何が原因かと言うと qnoir さんが回答で書いているように 'Access-Control-Allow-Origin': '*' があるからです。あとで回答欄に詳細を追記しておきます。

[ITmaroon]

詳しい説明をありがとうございます。感動モノです。今回の知識はしっかり身につけて、今度は自分が他の方に還元できればと思います。