質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

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

ITmaroon
ITmaroon

総合スコア8

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

0グッド

4クリップ

684閲覧

投稿2023/02/03 05:19

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コマンドを叩くという選択肢もあるのですが、できればフロントエンドで完結させたいのです。

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

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

penguin520

2023/02/03 06:17

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

2023/02/03 06:33

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

2023/02/03 08:24

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

回答2

2

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

js

1fetch(GASURL, 2 { 3 method: 'GET', 4 headers: { 5 'Content-Type': 'application/x-www-form-urlencoded', 6 // 'Access-Control-Allow-Origin': '*' 7 }, 8 9 }) 10 .then((res) => { 11レスポンスの処理 12});

投稿2023/02/03 10:03

qnoir

総合スコア8112

penguin520, ITmaroon👍を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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 対応の応答ヘッダが返ってきて、ブラウザはそれを見てコンテンツを取得します。

投稿2023/02/03 06:01

編集2023/02/04 03:15
SurferOnWww

総合スコア17614

ITmaroon😄を押しています
penguin520👍を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

ITmaroon

2023/02/03 08:26

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

2023/02/03 09:26 編集

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

2023/02/04 02:08

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

2023/02/04 03:58

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

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。