AWS Lambda (Java) で用意したAPIをHTMLから叩くと「No 'Access-Control-Allow-Origin'」エラーが出る。

表題の通りですが、AWS Lambda (Java) で用意したAPIをHTMLから叩くと「No 'Access-Control-Allow-Origin'」エラーが出る。以下のサイトからawsコンソールの設定やcors有効など行ったがうまくいかなかった。

・以下Java Lambda

package taboapi;

import java.util.HashMap;
import java.util.Map;

import com.amazonaws.services.lambda.runtime.Context;
import com.amazonaws.services.lambda.runtime.LambdaLogger;
import com.amazonaws.services.lambda.runtime.RequestHandler;
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;

public class HandlerEcho implements RequestHandler<Map<String,String>, Map<String,String>>{
Gson gson = new GsonBuilder().setPrettyPrinting().create();

@Override
public Map<String,String> handleRequest(Map<String,String> event, Context context)
{
LambdaLogger logger = context.getLogger();

logger.log("EVENT: " + gson.toJson(event));
logger.log("EVENT TYPE: " + event.getClass().toString());

return event;
}
}

・続いてHTMLが以下です。

<html lang="ja">
<head>
<meta charset="UTF-8">
<title>foo</title>
</head>
<body>
<button onclick="callEcho()">Click me</button>

<script>
function callEcho() {
var request = new XMLHttpRequest();
request.open('POST', ' https://xxx.execute-api.ap-northeast-1.amazonaws.com/xxx', true);

request.onload = function () {
eval(JSON.parse(this.response).responseContents);
}

request.send('{"orderId": "test1", "serviceOptionType":"sb_matomete", "withCapture":"false", "amount":"10", "ItemId":"test1", "accountingType":"0", "terminalKind":"0", "itemType":"0"}','{"responseContents":"window.location.href = \'https://localhost:8080\';"}');
}
</script>

</body>
</html>

・上記を実行すると以下のエラーが出てしまいます。なぜでしょうか？

Access to XMLHttpRequest at 'https://xxx.execute-api.ap-northeast-1.amazonaws.com/xxx' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

上記の改善と、現在はクロームで応急処置をして次に進もうとしているのですが、その時に415エラーを吐きだします。対応策はないのでしょうか。
内容以下
POST http～　415

何かアドバイスお願いします。
よろしくお願いします。

m.ts10806

2020/08/29 02:33

htmlはどこに置いてどのように実行されているのでしょうか

tabo-00

2020/08/29 03:27

自分のPCローカルのディスクトップにHTMLファイルを作成して、開いて「onclick」ボタンを押してレスポンス確認しています。

行動規範の内容に同意します

回答2件

API Gateway の裏に lambda がいる構成ですね。

前提として、 API Gateway の設定として CORS 有効化が必要です（質問文から断定はできませんでしたが、おそらくここは既に実施されてるのかな、と思いました）

API Gateway と lambda 間の接続方法とでもいいますか。公式で「統合タイプ」と呼ばれる仕様があります。これはデプロイするユーザーが選べる設定ですが、この種類によって lambda が返すべきレスポンスの形式は異なってきます。もしかするとそこに違反しているかもしれません。

https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/api-gateway-api-integration-types.html

例えば、 "AWS_PROXY" の場合を見ていただくと、出力形式に指定があることがわかると思います。header 等の情報も lambda のレスポンスとして map で返す必要があるわけです。CORS を使いたい場合、ここのレスポンスも CORS 仕様に合わせて 'Access-Control-Allow-Origin' ヘッダをつけてやる必要があります。CORS関連で自分がハマった範囲だとここの仕様の失念が一番ありそうかな、という気はします。
※このケースに該当しているなら、CORSを切ってアクセスしても API はコケるはずなので、それで切り分けできると思います

すこし気になるのは 'chromeでの応急処理' をすると 415 が返っていることですね。これって 'Unsupported Media Type' なので、 API Gateway が想定している Content-Type (通常は application/json )と実態がマッチしてないのでは、とかも考えられます。

XMLHttpRequest の挙動は詳しくないですが、例えば form-encoded などで投げていたりはしないでしょうか？

投稿2020/09/10 17:05