CORSをヘッダーで許可をしてもWebAPIのJSONを取得できない

Question

##わからないこと
スプレッドシートの項目をWebAPIとして使用すべく、ウェブアプリケーションとして公開後、Fetch APIで取得できないか試しました。
WordPress上で使用しています。
Access-Control-Allow-Originのエラーが発生し、JSONをうまく取得できません。
どのようにすれば、取得できるようになるのでしょうか？

発生しているエラー

次の二つのエラーが発生しています。
ccess to fetch at 'https://script.google.com/macros/s/[スプレッドシートのid]/exec' from origin 'http://localhost:9200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.

GET https://script.google.com/macros/s/[スプレッドシートのid]/exec net::ERR_FAILED

試したこと

調べたところ、admin-ajax.php、functions.phpに
次のように追加する方法もあるらしく、試しましたが変化はなかったです。

admin-ajax.php
header( 'Access-Control-Allow-Origin: *' );

functions.php
function add_cors_http_header(){
  header("Access-Control-Allow-Origin: *");
}
add_action('init','add_cors_http_header');

##コード

    postData('https://script.google.com/macros/s/[スプレッドシートのid]/exec')
    .then(data => console.log(JSON.stringify(data)))
    .catch(error => console.log(error));
  
  function postData(url = '') {
    return fetch(url, {
          method: "GET",
          mode: "cors",
          cache: "no-cache",
          headers: {
              "Content-Type": "application/json; charset=utf-8",
               "Access-Control-Allow-Origin": "*" //ここにも追加しました
          },
      })
      .then(response => response.json());
  }

Answer 1

Access-Control-Allow-Originヘッダはクライアント側からサーバ側へ提供するヘッダではなくサーバ側からクライアント側へ提供されるヘッダのため、リクエストヘッダに付与したところで意味を持ちません。
GASを公開する際に公開範囲を自分のみに設定したままだったりはしないでしょうか？
全員(匿名ユーザーを含む)を選択しないとFetchAPI等では利用することができません。

Comments

[southern_flavor]

ご回答ありがとうございます。
クライアント側から指定しても意味ないんですね。
GASの公開範囲ですが、Who has access to the app:を全ユーザにしていて、念のため再度設定しましたが、変わらないです。。

[rozeo_s]

全ユーザと全ユーザ(匿名ユーザーを含む)があって後者じゃないとダメなようです(先程試した)
英語だとAnyone, even anonymousになります。
あと若干この辺曖昧なんですがバージョン更新しないと権限等が変わらないこともあるので一度確認してみるといいかもしれません。

[southern_flavor]

Anyone, even anonymousに変更してバージョンをNEWにしましたが状況は変わらずでした。
GAS自体に問題があるのかと思い、各関数に対してデバッグもしましたが特に問題なく出力されたJSONの形式も正しかったです。
Access-Control-Allow-OriginヘッダはApacheの設定ファイルやhtaccessにも設定する方法があるようですが、すでにPHP側で設定していたら意味ないでしょうか？

[rozeo_s]

Access-Control-Allow-OriginヘッダはGAS側から提供されるものなのでPHPは関係ありません。
GASへはjavascriptのfetchAPIを使ってリクエストしてますよね？
一応自分の方では上記のような設定をすれば以下のような最小コードで問題なくリクエストできるので…
fetch('url', {
method: "GET",
mode: "cors",
cache: "no-cache",
})
.then((response) => response.json())
　　.then((p) => console.log(p));

[rozeo_s]

あ、わかった…本来不要の Content-Type ヘッダに application/json 指定してることが原因ですね…
GAS、 Content-Type が application/jsonだとCORSでコケるらしく、GETなら無視するのかと思ってたんですがダメっぽいですね…
GASはCORSのPreflight Requestに対応してないらしく、POST時はダメだとは知ってたんですけど、Content-Type入れちゃうとfetchAPIがPreflightリクエスト飛ばしちゃうようですね…
本質としては そもそもGETリクエストには レスポンスボディ自体ないので Content-Typeの指定がいらないです
なので、上記コードの headers 部分を消せば動くかと思います。
あと今更ですが CROS ではなく CORS(Cross-Origin Resource Sharing)なのでご注意を…

[southern_flavor]

ありがとうございます。問題なく取得できました！
Content-Type ヘッダをとってみたら、取得できました。
これには目がいかなかったので、FetchAPIのリファレンスのほうもよく確認するようにします。