Javascript TypeError : cannot read properties of undefined (reading 'fields')の解決方法が分からない

Question

実現したいこと

CloudfrontからAPIgateway・Lambda経由でS3にファイルをアップロードするwebアプリケーションを実現したいです。

発生している問題・分からないこと

下記の公式サイトを参考に、APIgatewayのデフォルトエンドポイントからファイルアップロードをすることはできました。
https://aws.amazon.com/jp/blogs/news/large-size-files-transferring-by-serverless-s3presignedurl-and-clientside-javascript/

ただ、cloudfrontのオリジンにAPIgatewayのデフォルトエンドポイントを設定し、ファイルアップロードを試みたところ、タイトルにあるエラーが発生しました。
調べたところ、javascriptの型未定義エラーの可能性が高いです。
エラーが発生している可能性のあるソースコードは下記になります。

エラーメッセージ

TypeError : cannot read properties of undefined (reading 'fields')

該当のソースコード

  const fields = targetInfo["contents"]["fields"];
  Object.keys(fields).forEach(key => formData.append(key, fields[key]));

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

・cloudfrontではなく、APIgatewayのカスタムドメインを設定したところ同様のエラーが出ました。

補足

特になし

Comments

[yu_1985]

型ではなくてcontentsにfieldsというプロパティが定義されてないというメッセージではないでしょうか。
なのてcontentsがちゃんと取得できているかのあたりをデバッグしてみてください

そもそもこのケースだとAPI Gatewayの前にCloudFrontを置く必要があまりなさそうに思えるのですが、なぜそうしたいのでしょう？

[kuuuuuya]

ご回答いただきありがとうございます。
早急にデバックをいたします。
Cloudfrontを置く理由はACM証明書を設定したいためですが、Cloudfrontを置く必要はないですか？

[yu_1985]

CloudFrontを使う必要はなく、API Gatewayだけで十分です。
https://dev.classmethod.jp/articles/tsnote-api-gateway-http-api-custom-domain/

[kuuuuuya]

リンクまで添付していただき、ありがとうございます。
早速試してみました、カスタムドメイン経由でもやはり下記の同じエラーが出てしまいます。
TypeError: Cannot read properties of undefined (reading 'fields')
at HTMLFormElement.<anonymous>

ただ、カスタムドメイン経由では下記のエラーも出ております。
GET 403 (Forbidden)
一つ目 : fetchwrapper

const fetchWrapper = async (uri, params) => {
let data;
let response;

try {
response = await fetch(uri, params);
data = await response.json();
} catch (error) {
throw new Error(`Fetch Call response failed] status: ${response.status}`);
}

return data;
}

二つ目 : getTransferTargetInfo
export const getTransferTargetInfo = async (resourcePath) => {
let idToken = sessionStorage.getItem("id_token");

// トークンがセッション情報から取得できなかった場合は処理終了
if (idToken === null) {
throw new Error("[Token Error] Failed to get token.");
}

/** アップロード/ダウンロードのための関連情報 */
let targetInfo;

try{
let apiStage = EXECUTE_API_STAGE;

// API 呼び出し実行
targetInfo = await fetchWrapper(`${location.origin}${apiStage}${resourcePath}`,
{
method: "GET",
headers: {
"Authorization": `Bearer ${sessionStorage.getItem("id_token")})}`
}
});
} catch (error) {
console.error(`[API Errors] ${error}`);
}

return targetInfo;
}

3つ目：(anonymous)
let targetInfo = await getTransferTargetInfo("/api/upload");

[yu_1985]

細かいデバッグの話になるので、まずはエラーが発生するときのcontentsの中に何が入っているのかを調べて、そこから原因を絞り込んでいってください。

Answer 1

これはエラーメッセージのとおりです。
エラーメッセージを雑に翻訳すると、「undefined のプロパティは読めません ('field' を読もうとしています)」となります。
コードを見ると、targetInfo["contents"]["fields"] という箇所があり、targetInfo["contents"] が undefined であるにも関わらず、["field"] プロパティにアクセスしようとしているため、上記のエラーが出たものと思われます。
先に targetInfo の contents フィールドに値を設定するようにすればエラーは解消します。

ちなみに、JavaScript に型を定義する機能はありませんし、必要もないので、JavaScriptの型未定義エラーというのはあり得ません。

Comments

[kuuuuuya]

ご回答いただき、ありがとうございます。
エラー内容をちゃんと理解できていないのに、質問してしまい申し訳ございませんでした。
ご教示いただき、ありがとうございます。

先に targetInfo の contents フィールドに値を設定するとご教示いただいたのですが、デフォルトエンドポイントからは問題なくアップロードできるため、どこに値を設定すればよいか分からない状況です。
ただ、デフォルトエンドポイントでは出なかった下記のエラーが出ているため、こちらが原因なのかなと思っております。
GET 403 (Forbidden)
一つ目 : fetchwrapper

const fetchWrapper = async (uri, params) => {
let data;
let response;

try {
response = await fetch(uri, params);
data = await response.json();
} catch (error) {
throw new Error(`Fetch Call response failed] status: ${response.status}`);
}

return data;
}

二つ目 : getTransferTargetInfo
export const getTransferTargetInfo = async (resourcePath) => {
let idToken = sessionStorage.getItem("id_token");

// トークンがセッション情報から取得できなかった場合は処理終了
if (idToken === null) {
throw new Error("[Token Error] Failed to get token.");
}

/** アップロード/ダウンロードのための関連情報 */
let targetInfo;

try{
let apiStage = EXECUTE_API_STAGE;

// API 呼び出し実行
targetInfo = await fetchWrapper(`${location.origin}${apiStage}${resourcePath}`,
{
method: "GET",
headers: {
"Authorization": `Bearer ${sessionStorage.getItem("id_token")})}`
}
});
} catch (error) {
console.error(`[API Errors] ${error}`);
}

return targetInfo;
}

3つ目：(anonymous)
let targetInfo = await getTransferTargetInfo("/api/upload");

同時にGET <URL> 403(forbidden)