0
APIゲートウェイにAWS Lambda関数が添付されています。私はいつもCORSを設立しようとしていますが、ここで何が起こっているのか分かりません。 APIゲートウェイから、次のようにOPTIONSメソッドのサーバから有効な応答を受け取ったにもかかわらず、Ajax CORSは常に失敗する
var endPoint = 'https://776v8jadw0.execute-api.us-east-1.amazonaws.com/sandbox/helpwithprogramming/contact';
var payload = {message: 'Hello there'};
var headers = new Headers();
headers.append('Access-Control-Allow-Origin', '*');
var options = {
method: 'POST',
headers: headers,
mode: 'cors',
cache: 'default',
body: JSON.stringify(payload)
};
fetch(endPoint, options)
.then(res => {
console.log('ok', res);
})
.catch(err => {
console.log('error', err);
});
マイレスポンスヘッダは次のとおりです：
この
は、クライアントの要求であるaccess-control-allow-headers:Access-Control-Allow-Origin,Content-Type,Authorization,X-Amz-Date,X-Api-Key,X-Amz-Security-Token
access-control-allow-methods:DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT
access-control-allow-origin:*
content-length:0
content-type:application/json
date:Mon, 11 Dec 2017 05:33:59 GMT
status:200
そして私は、POST APIゲートウェイからの次の応答を取得します
{message: "Hello from Lambda"}
しかし、実際にフェッチコールが失敗し、tに入ります彼は次のエラーでブロックをキャッチ：
TypeError: Failed to fetch
とChromeは、コンソールでこのメッセージが表示されます。APIゲートウェイにAWS Consoleのナビゲートで
Failed to load https://776v8jadw0.execute-api.us-east-1.amazonaws.com/sandbox/helpwithprogramming/contact : No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:63342 ' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
ヘッダーを追加する前にブラウザがキャッシュしたキャッシュされた応答が得られないように、強制的に再読み込みを試みてください。または、別のブラウザから試してみてください。また、フロントエンドコードから 'headers.append（ 'Access-Control-Allow-Origin'、 '*'）;'部分を削除してください。リクエストでそのヘッダを送信したくない場合は、厳密にはサーバのレスポンスヘッダです返送する。 – sideshowbarker
私はそれを解決することができました。私は、OPTIONSとapiゲートウェイからのPOST応答の両方に（ 'Access-Control-Allow-Origin'、 '*'）を追加する必要がありました。 – Tony