【API Gateway】CORSエラーを回避できない

Question

前提

顧客情報を入力して送信すると、
API Gateway REST APIからLambda関数を呼び出し、DynamoDBに保存する機能を作っています。

発生している問題・エラーメッセージ

送信時、以下のエラーメッセージをコンソールで吐き続けています。

Access to fetch at 'https://xxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/prod/customers' 
from origin 'https://xxxxxxxxx.s3.ap-northeast-1.amazonaws.com' 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.

顧客情報入力画面で働くJS

$("#createSubmit").click(function(e) {
    e.preventDefault();

    const send = {
      method: "POST",
      mode: "cors",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify("顧客情報")
    };

    fetch('https://xxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/prod/customers', send)
    .then(alert('送信成功'));
});

情報を送信すると呼び出されるlambda関数

const AWS = require("aws-sdk");
const dynamo = new AWS.DynamoDB.DocumentClient();

exports.handler = async (event, context) => {
  const statusCode = 200;
  const headers = {
    "Access-Control-Allow-Headers" : "Content-Type",
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "POST"
  };
  const body = JSON.parse(event.body);
  
  try {
      await dynamo
        .put({
          TableName: "xxxxxxxx",
          Item: body
        })
        .promise();
  } catch (err) {
    statusCode = 400;
    params = err.message;
  }

  return {
    statusCode,
    body,
    headers
  };
};

試したこと

こちらのドキュメントを参考に、APIGatewayの設定をいろいろと弄くりましたが（都度デプロイしてます）、解決に至りませんでした。

• プロキシ統合は使用していません。
• 将来的にGET、DELETE、PUTメソッドも作る予定ですが、現在はPOSTのみです。

何卒、お知恵をお貸し頂けると有り難いです。。

Comments

[yu_1985]

まず、そもそもここの設定はやりましたか？
https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/how-to-cors-console.html

貼ったのはコンソールからの設定の場合なのでそれ以外のところも必要であれば読んでください。

[kanieksuke]

レビューありがとうございます！

記載し忘れましたが、コンソールから以下の設定で有効化しています。

APIのゲートウェイレスポンス: チェック無し
Ac0cess-Control-Allow-Methods: OPTIONS,POST
Access-Control-Allow-Headers: 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'
Access-Control-Allow-Origin: '*'

[tamanegine]

左上に見えますアクション→APIのデプロイ→該当のステージ（今回はProd？）は実施済みでしょうか
パスやメソッドを生やすごとに上記の操作が必要になります

[kanieksuke]

レビューありがとうございます！

APIGatewayについては、何か設定を変更する度にデプロイしているのですが、結果に変化なしです。。

Answer 1

    fetch('https://xxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/prod/customers', send)
    .then(alert('送信成功'));

API Gatewayのエンドポイント
https://xxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/prod/customer

fetchで指定しているエンドポイント
https://xxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/prod/customers

なぜsを付けたし。。

「not found "https://xxxxxxx~"」
的な気の利いたエラーを吐いて欲しかったです笑