ブラウザからAPIGateway経由のLambdaを呼び出すことができない

Question

やりたいこと

[ブラウザ] -> [API Gateway] -> [Lambda関数] の実行

現状

できていること

• curlによるAPIGatewayの呼び出し
  curl -X POST -H 'Origin: https://example.com ' -H 'Access-Control-Request-Method: GET,POST' {ENDPOINT}を実行するとLambdaが正常に呼び出せています

• 上記の結果からCORSの設定はできているのではないかと思っています

できていないこと

• ブラウザからのAPI呼び出し

            const res = await fetch(URL, {
              method: 'POST',
              mode: 'cors',
              cache: 'no-cache',
              body: jsonData,
              headers: {
                'Content-Type': 'application/json; charset=utf-8'
              }
            });

のようなjavascriptをボタンを押した際に呼ばれるようにしていますが、

TypeError: Failed to fetch

というエラーがでてしまい上手くいきません。

確認した方がいい箇所等ご教授いただけないでしょうか？

Comments

[ockeghem]

curl呼び出しの際のレスポンス（ヘッダ含め全部）とfetchでエラーになる際のブラウザのコンソールのエラー（あれば）を追記してください。

[kooodai]

返信ありがとうございます。

レスポンスは、

```
HTTP/2 200
content-type: application/json; charset=utf-8
content-length: 15
date: Sat, 08 Aug 2020 09:57:06 GMT
x-amzn-requestid: fd6e5bd7-bc54-43bb-a3a3-17c15e3a33a0
access-control-allow-origin: *
x-amzn-remapped-content-length: 15
x-amzn-remapped-connection: close
x-amz-apigw-id: Q8eF-G-HNjMFXMg=
etag: W/"f-NQVRlQfKHCoInEbhALgECMonhCE"
x-powered-by: Express
x-amzn-trace-id: Root=1-5f2e76f2-b136d1f7905f9307702f1969;Sampled=0
x-amzn-remapped-date: Sat, 08 Aug 2020 09:57:06 GMT
x-cache: Miss from cloudfront
via: 1.1 b4dadadff1d09a3efb8a9374bdfc2849.cloudfront.net (CloudFront)
x-amz-cf-pop: NRT12-C2
x-amz-cf-id: rwVQ6Dbrbo5RDilt2ywjOe7k5BeY0Ik660SkuhPWq67ELKFIsG-41Q==
```

が返ってきました。

また、ブラウザのコンソールのエラーは、
`TypeError: Failed to fetch`
と出ているだけでした。

[ockeghem]

ありがとうございます。レスポンスは特に問題なさそうですが、ブラウザで実行すると、プリフライトリクエスト（OPTIONSメソッド）が飛んでいると思います。ブラウザの開発ツールの「ネットワーク」にて、プリフライトリクエストの結果（レスポンス）がどうなっているか調べてください。

[kooodai]

使い方がわかっていないのかもしれませんが、
「ネットワーク」を調べると、
・?msg=aaa (レスポンスはhtmlの中身)
・main.js
しかNameに存在せず、プリフライトリクエストの結果が見られません。

正常時は、Networkのタブを開いたら、APIGatewayのURL項目があるのかと思っていましたが違うのでしょうか。

[ockeghem]

APIGatewayの項目があるはずで、ないとしたら呼び出されていないことになります

[kooodai]

呼び出せてないかもですね。
JavaScript初心者なのですが、awaitなどを使わずにもっとシンプルに書いたほうが切り分けやすいんですかね。
(パッとは思いつきませんが