API Gateway CORS: tidak ada header 'Access-Control-Allow-Origin'

Meskipun CORS telah disiapkan melalui API Gateway dan Access-Control-Allow-Originheader telah disetel, saya masih menerima kesalahan berikut saat mencoba memanggil API dari AJAX dalam Chrome:

XMLHttpRequest tidak dapat memuat http://XXXXX.execute-api.us-west-2.amazonaws.com/beta/YYYYY . Tidak ada header 'Access-Control-Allow-Origin' yang ada di resource yang diminta. Oleh karena itu, asal 'null' tidak diizinkan mengakses. Responsnya memiliki kode status HTTP 403.

Saya mencoba MENDAPATKAN URL melalui Postman dan itu menunjukkan header di atas berhasil dilewatkan:

Dan dari jawaban OPTIONS:

Bagaimana cara memanggil API saya dari browser tanpa kembali ke JSON-P?

Saya mendapatkan masalah yang sama. Saya telah menggunakan 10 jam untuk mencari tahu.

https://serverless.com/framework/docs/providers/aws/events/apigateway/

// handler.js

'use strict';

module.exports.hello = function(event, context, callback) {

const response = {
  statusCode: 200,
  headers: {
    "Access-Control-Allow-Origin" : "*", // Required for CORS support to work
    "Access-Control-Allow-Credentials" : true // Required for cookies, authorization headers with HTTPS 
  },
  body: JSON.stringify({ "message": "Hello World!" })
};

callback(null, response);
};

Jika ada orang lain yang masih mengalami masalah ini - saya dapat melacak akar penyebabnya di aplikasi saya.

Jika Anda menjalankan API-Gateway dengan Otorisasi khusus - API-Gateway akan mengirim kembali 401 atau 403 sebelum benar-benar mengenai server Anda. Secara default - API-Gateway TIDAK dikonfigurasikan untuk CORS saat mengembalikan 4xx dari pemberi otorisasi khusus.

Juga - jika Anda kebetulan mendapatkan kode status 0atau 1dari permintaan yang berjalan melalui API Gateway, ini mungkin masalah Anda.

Untuk memperbaiki - dalam konfigurasi API Gateway - buka "Gateway Responses", luaskan "Default 4XX" dan tambahkan header konfigurasi CORS di sana. yaitu

Access-Control-Allow-Origin: '*'

Pastikan untuk menerapkan ulang gateway Anda - dan voila!

1) Saya perlu melakukan hal yang sama seperti @riseres dan beberapa perubahan lainnya. Ini adalah header tanggapan saya:

headers: {
            'Access-Control-Allow-Origin' : '*',
            'Access-Control-Allow-Headers':'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token',
            'Access-Control-Allow-Credentials' : true,
            'Content-Type': 'application/json'
        }

2) Dan

Menurut dokumentasi ini:

http://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

Saat Anda menggunakan proxy untuk fungsi lambda pada konfigurasi API Gateway, metode posting atau get tidak memiliki header tambahan, hanya opsinya saja. Anda harus melakukannya secara manual dalam respons (respons server atau lambda).

3) Dan

Selain itu, saya perlu menonaktifkan opsi 'API Key Diperlukan' dalam metode posting gateway API saya.

Jika Anda telah mencoba segala sesuatu tentang masalah ini tetapi tidak berhasil, Anda akan berakhir seperti yang saya lakukan. Ternyata, arah penyiapan CORS Amazon yang ada berfungsi dengan baik ... pastikan Anda ingat untuk menerapkan ulang ! Wizard pengeditan CORS, bahkan dengan semua tanda centang hijau kecilnya yang bagus, tidak membuat pembaruan langsung ke API Anda. Mungkin sudah jelas, tapi itu membuatku bingung selama setengah hari.

Membuat sampel saya berfungsi: Saya baru saja memasukkan 'Access-Control-Allow-Origin': '*', di dalam header: {} di fungsi Lambda nodejs yang dihasilkan. Saya tidak membuat perubahan pada lapisan API yang dihasilkan Lambda.

Inilah NodeJS saya:

'use strict';
const doc = require('dynamodb-doc');
const dynamo = new doc.DynamoDB();
exports.handler = ( event, context, callback ) => {
    const done = ( err, res ) => callback( null, {
        statusCode: err ? '400' : '200',
        body: err ? err.message : JSON.stringify(res),
        headers:{ 'Access-Control-Allow-Origin' : '*' },
    });
    switch( event.httpMethod ) {
        ...
    }
};

Ini panggilan AJAX saya

$.ajax({
    url: 'https://x.execute-api.x-x-x.amazonaws.com/prod/fnXx?TableName=x',
    type: 'GET',
    beforeSend: function(){ $( '#loader' ).show();},
    success: function( res ) { alert( JSON.stringify(res) ); },
    error:function(e){ alert('Lambda returned error\n\n' + e.responseText); },
    complete:function(){ $('#loader').hide(); }
});

Untuk Karyawan Google:

Inilah alasannya:

• Permintaan sederhana, atau, GET/POST tanpa cookie tidak memicu preflight
• Saat Anda mengonfigurasi CORS untuk sebuah jalur, API Gateway hanya akan membuat OPTIONSmetode untuk jalur tersebut, kemudian mengirim Allow-Originheader menggunakan respons tiruan saat pengguna memanggil OPTIONS, tetapi GET/ POSTtidak akan mendapatkanAllow-Origin otomatis
• Jika Anda mencoba mengirim permintaan sederhana dengan mode CORS aktif, Anda akan mendapatkan kesalahan karena respons itu tidak memiliki Allow-Origin header
• Anda dapat mematuhi praktik terbaik, permintaan sederhana tidak dimaksudkan untuk mengirim tanggapan kepada pengguna, mengirim otentikasi / cookie bersama dengan permintaan Anda untuk membuatnya "tidak sederhana" dan preflight akan memicu
• Namun, Anda harus mengirim header CORS sendiri untuk permintaan berikut OPTIONS

Singkatnya:

• Hanya tidak berbahaya yang OPTIONSakan dibuat oleh API Gateway secara otomatis
• OPTIONShanya digunakan oleh browser sebagai tindakan pencegahan untuk memeriksa kemungkinan CORS di jalur
• Apakah CORS diterima tergantung pada metode sebenarnya, misalnya GET/POST
• Anda harus mengirim header yang sesuai secara manual dalam tanggapan Anda

Saya baru saja menambahkan tajuk ke respons fungsi lambda saya dan itu bekerja seperti pesona

exports.handler = async (event) => {
    const response = {
        statusCode: 200,
        body: JSON.stringify('Hey it works'),
        headers:{ 'Access-Control-Allow-Origin' : '*' }
    };
    return response;
};

Saya menemukan solusi sederhana di dalamnya

API Gateway> Pilih titik akhir API Anda> Pilih metode (dalam kasus saya itu adalah POST)

Sekarang ada TINDAKAN dropdown> Aktifkan CORS .. pilih itu.

Sekarang pilih TINDAKAN dropdown lagi> Terapkan API (terapkan kembali)

Berhasil!

Saya membuat milik saya berfungsi setelah saya menyadari bahwa lambda authoriser gagal dan untuk beberapa alasan yang tidak diketahui itu diterjemahkan menjadi kesalahan CORS. Perbaikan sederhana untuk penulis otorisasi saya (dan beberapa pengujian penulis otorisasi yang seharusnya saya tambahkan sejak awal) dan berhasil. Bagi saya, tindakan API Gateway 'Aktifkan CORS' diperlukan. Ini menambahkan semua tajuk dan pengaturan lain yang saya butuhkan di API saya.

Bagi saya, jawaban yang AKHIRNYA BEKERJA, adalah komentar dari James Shapiro dari jawaban Alex R (suara terbanyak kedua). Saya masuk ke masalah API Gateway ini pertama-tama, dengan mencoba mendapatkan halaman web statis yang dihosting di S3 untuk menggunakan lambda untuk memproses halaman hubungi kami dan mengirim email. Cukup dengan memeriksa [] Default 4XX memperbaiki pesan kesalahan.

Setelah Mengubah Fungsi atau Kode Anda Ikuti dua langkah berikut.

Pertama Aktifkan CORS Kemudian Terapkan API setiap saat.

Menerapkan kode setelah mengaktifkan CORS untuk keduanya POSTdan OPTIONSberhasil untuk saya.

Saya sedang menjalankan aws-serverless-express, dan dalam kasus saya perlu mengeditsimple-proxy-api.yaml .

Sebelum CORS dikonfigurasi ke https://example.com, saya baru saja menukar nama situs saya dan menerapkan ulang melalui npm run setup, dan itu memperbarui lambda / stack saya yang ada.

#...
/:
#...
method.response.header.Access-Control-Allow-Origin: "'https://example.com'"
#...
/{proxy+}:
method.response.header.Access-Control-Allow-Origin: "'https://example.com'"
#...

Dalam kasus saya, karena saya menggunakan AWS_IAM sebagai metode Otorisasi untuk API Gateway, saya perlu memberikan izin peran IAM saya untuk mencapai titik akhir.

Akar penyebab lain dari masalah ini mungkin adalah perbedaan antara HTTP / 1.1 dan HTTP / 2.

Gejala: Beberapa pengguna, tidak semuanya, dilaporkan mendapatkan kesalahan CORS saat menggunakan Perangkat Lunak kami.

Masalah: The Access-Control-Allow-Originsundulan hilang kadang-kadang .

Konteks: Kami memiliki Lambda di tempat, yang didedikasikan untuk menangani OPTIONSpermintaan dan membalas dengan header CORS yang sesuai, seperti Access-Control-Allow-Originmencocokkan yang masuk daftar putih Origin.

Solusi: API Gateway tampaknya mengubah semua header menjadi huruf kecil untuk panggilan HTTP / 2, tetapi mempertahankan kapitalisasi untuk HTTP / 1.1. Ini menyebabkan akses event.headers.origingagal.

Periksa apakah Anda juga mengalami masalah ini:

Dengan asumsi API Anda terletak di https://api.example.com, dan front-end Anda di https://www.example.com. Menggunakan CURL, buat permintaan menggunakan HTTP / 2:

curl -v -X OPTIONS -H 'Origin: https://www.example.com' https://api.example.com

Output respon harus menyertakan tajuk:

< Access-Control-Allow-Origin: https://www.example.com

Ulangi langkah yang sama menggunakan HTTP / 1.1 (atau dengan Originheader huruf kecil ):

curl -v -X OPTIONS --http1.1 -H 'Origin: https://www.example.com' https://api.example.com

Jika Access-Control-Allow-Originheader hilang, Anda mungkin ingin memeriksa sensitivitas huruf saat membaca Originheader.

Selain komentar lain, sesuatu yang harus diperhatikan adalah status yang dikembalikan dari integrasi yang mendasarinya dan jika header Access-Control-Allow-Origin dikembalikan untuk status itu.

Melakukan hal 'Aktifkan CORS' hanya menyiapkan 200 status. Jika Anda memiliki endpoint lain, misalnya 4xx dan 5xx, Anda perlu menambahkan header sendiri.

Dalam kasus saya, saya hanya salah menulis URL permintaan pengambilan. Aktif serverless.yml, Anda menyetel corske true:

register-downloadable-client:
    handler: fetch-downloadable-client-data/register.register
    events:
      - http:
          path: register-downloadable-client
          method: post
          integration: lambda
          cors: true
          stage: ${self:custom.stage}

dan kemudian pada penangan lambda Anda mengirim header, tetapi jika Anda membuat permintaan pengambilan yang salah di frontend, Anda tidak akan mendapatkan header tersebut pada respons dan Anda akan mendapatkan kesalahan ini. Jadi, periksa kembali URL permintaan Anda di bagian depan.

Dengan Python Anda bisa melakukannya seperti pada kode di bawah ini:

{ "statusCode" : 200,
'headers': 
    {'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': "*"
     },
"body": json.dumps(
    {
    "temperature" : tempArray,
    "time": timeArray
    })
 }