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

前提

顧客情報を入力して登録すると、
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

customer.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関数

index.js

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のみです。

イメージ説明

イメージ説明

イメージ説明

イメージ説明

イメージ説明

イメージ説明

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

コメントを投稿

0 コメント