Ajax（jQuery）を使って画像をAWS LambdaにPostし、S3に画像を保存したい

Question

画像をAWSのAPI Gateway経由でLambdaにPostしたいのですが、2点ひっかかっています。
formには画像のアップロードボタンとスライドバーがあり、Post先のurlがAWSのAPI Gatewayです。API Gateway経由でAWS Lambdaを呼び出し、S3に画像を保存したいです。

困っていることの1つはCORSの対策で、API Gateway側には
Access-Control-Allow-Headers 'Content-Type,X-Amz-Date,Authorization'
Access-Control-Allow-Methods 'POST'
Access-Control-Allow-Origin '*'
が設定してあります。jQuery側で叩くと、画像をPostしているのでcontentType: falseにしているせいか、CORSに引っかかってしまいます。
どう設定するのが正しいのでしょうか。クライアント側での設定も必要であれば教えていただきたいです。

2つ目はそもそも画像の取り扱いで、var formdata = new FormData($('#form').get(0));では「data:image/jpeg;base64,/（英数字の文字列）」が取得できます。これをS3に保存したいのですが、この値自体をObjectとして保存するのだとうまく画像が保存できませんでした。（S3上にオブジェクトはできますが、壊れているとかで開けませんでした。なので、保存する対象を間違っているか、処理を間違っていると思います）
どう保存すればよいのでしょうか。

ソースコードは下記です。

<form id="form" action="#!">
  <input type="file" name="fileupload" class="uploadFile">
  <input type="range" min="1" max="50" value="25" class="slider" id="hoge">
  <button id="submit-btn" class="btn btn-primary" type="submit">Submit</button>
</form>

$("#submit-btn").click(function(e){
  var hoge = $('#hoge').val();
  var formdata = new FormData($('#form').get(0));
  formdata.append("hoge", hoge);
  $.ajax({
        url: url,
        type: 'post',
        contentType: false,
        processData: false,
        cache: false,
        data: formdata
    }).done(function () {
        console.log("done");
    })
})

Comments

[yambejp]

> CORSに引っかかってしまいます。

送信元と送信先のドメインは一緒ですか？

[ois]

違うと思います。送信先はAWSのエンドポイントで、送信元はローカルなので…。

[yambejp]

違うならajaxの処理なんですからむしろCORSで弾かれるのが正常な状態では？

[ois]

おっしゃる通りです。どうやったら弾かれなくなるかが知りたいです。
サーバ側でAccess-Control-Allow-Originで全て、メソッドでPostなどを許可しており、画像post部分の処理をなくせば正常にAWS側までajaxでpostを投げることができます。なので、画像をpostする際に追加でするべき設定を知りたいという状態です。もしご存知なら教えていただきたいです。

Answer 1

formdataに問題がありました
yambejp様のおっしゃるようにCORSの設定は問題なかったのですが、
送るデータがJSONではなかったため、AWSで弾かれていたようです。
ありがとうございました。

Answer 2

apiを調整できるなら

Access-Control-Allow-Origin: *

だけでいけそうですけどね
ソース中urlはあえて指定されていないですが、実際には指定されているんですよね？

私のPHPのテスト環境だと

<?PHP
header('Content-Type: application/json'); // json
header('Access-Control-Allow-Origin: *');
print json_encode($_FILES);

で正常に戻りますね

<script>
$(function(){
  $('#submit-btn').on('click',function(e){
    e.preventDefault();
    var fd=new FormData($(this).prop('form'));
    fd.append("hoge","fuga");
    $.ajax({
    url:"http:・・・",
    type:"post",
    processData:false,
    contentType:false,
    cache:false,
    data:fd,
    }).done(function(data){
      console.log(data);
    }).fail(function(xhr,err){
      console.log(err);
    });
  });
});
</script>
<form >
<input type="file" name="fileupload" class="uploadFile">
<button id="submit-btn" class="btn btn-primary" type="submit">Submit</button>
</form>

イベントとめるのも忘れずに

Comments

[ois]

ありがとうございます。
urlは指定しております。
yambejp様のコードを参考に、イベントを止めて、一応PHPにあるようなヘッダーをajaxを送る際に付与しました。
Access to XMLHttpRequest at '指定したurl' from origin 'null' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.
というエラーが出ました。
API GatewayではContent-Type
、Access-Control-Allow-Originの他にAccess-Control-Allow-Originも指定しております。
こちらの設定はどうすればいいかご存知でしょうか。検索してもうまく見つけられませんでした…。