it-swarm.asia

Gateway API AWS - CORS + POST tidak bekerja

CORS benar-benar membuatku gila dan aku benar-benar kehabisan ide tentang apa yang harus dilakukan untuk membuatnya bekerja.

Saya telah membuat Api APIG sederhana dengan 1 sumber daya yang disebut 'abc' dan menambahkan 2 metode GET dan POST keduanya dengan Otorisasi diatur ke TIDAK ADA dan Diperlukan API Key diatur ke false, semua yang digunakan untuk tahap yang disebut 'dev'.

Tentu saja saya mengaktifkan CORS pada kedua metode dan saya melihat 3 header Access-Control-Allow-Origin, Access-Control-Allow-Header dan Access-Control-Allow-Methods ditambahkan ke metode OPTIONS dan Access-Control-Allow-Origin ditambahkan ke POST dan DAPATKAN metode.

Kedua panggilan dipetakan ke fungsi lambda yang sama yang hanya menampilkan teks 'Hello from Lambda' ke konsol.

Kemudian saya telah membuat halaman html sederhana yang saya host sebagai situs web statis pada S3, menunjuk domain ke sana menggunakan Route53 dan mulai menguji API menggunakan jQuery $ .ajax untuk melakukan panggilan.

Semua tampak mudah, langsung dan persis seperti yang dijelaskan dalam dokumen, kecuali hanya GET yang berfungsi dan menampilkan teks ke konsol seperti yang diharapkan. Versi POST menghasilkan kesalahan berikut: 

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example.com' is therefore not allowed access. The response had HTTP status code 400.

Panggilan preflight berfungsi dan mengembalikan 200 OK dan semua header ada di sana, tetapi panggilan POST mengembalikan kesalahan itu dan 400 Permintaan Buruk.

Mohon bantuannya sangat dihargai, saya harap tim AWS menonton juga ...

Terima kasih kawan 


Diedit - Disalin dari Google Chrome:

Header Permintaan Baku POST:

POST /dev/urls HTTP/1.1
Host: kykul1mshe.execute-api.us-east-1.amazonaws.com
Connection: keep-alive
Content-Length: 73
Accept: application/json, text/javascript, */*; q=0.01
Origin: http://example.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
Content-Type: application/json
Referer: http://example.com/dev.html
Accept-Encoding: gzip, deflate, br
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4

Tajuk Respons Baku POST:

HTTP/1.1 400 Bad Request
Date: Fri, 19 Aug 2016 02:14:16 GMT
Content-Type: application/json
Content-Length: 177
Connection: keep-alive
x-amzn-RequestId: a1160e45-65b2-11e6-9766-cd61e49fbcdb
X-Cache: Error from cloudfront
Via: 1.1 d64756b4df47ce24d6c62b5a8de97e87.cloudfront.net (CloudFront)
X-Amz-Cf-Id: N9mf7apicKbSM_MiZjePbEgZGIFKckWJ3lZljH8iHVKFVTcIIOQuHg==

Ini mengembalikan 400 Permintaan Buruk

PILIHAN Judul Permintaan Mentah:

Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4
Access-Control-Request-Headers:accept, content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:kykul1mshe.execute-api.us-east-1.amazonaws.com
Origin:http://example.com
Referer:http://example.com/dev.html
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36

PILIHAN Headers Respon Baku:

Access-Control-Allow-Headers:Content-Type,X-Amz-Date,Authorization,X-Api-Key,Cache-Control,X-Requested-With
Access-Control-Allow-Methods:POST,OPTIONS
Access-Control-Allow-Origin:*
Connection:keep-alive
Content-Length:79
Content-Type:application/json
Date:Fri, 19 Aug 2016 02:14:16 GMT
Via:1.1 d64756b4df47ce24d6c62b5a8de97e87.cloudfront.net (CloudFront)
X-Amz-Cf-Id:KpGEDmIuf5RHcUnBWuA3oEMZgWHwrjy3SpLuOflRhAD8IIx5vyKGSw==
x-amzn-RequestId:a10bae11-65b2-11e6-bcf7-63b49c24629e
X-Cache:Miss from cloudfront

Ini mengembalikan 200 OK

15
HBR

Ok, saya menemukan Origin of the problem, yang kebetulan sama sekali tidak berhubungan dengan APIG, dan mengkonfirmasi apa yang @AbhignaNagaraja sebutkan, bahwa APIG saya sudah dikonfigurasi dengan benar.

Masalahnya sebenarnya dalam cara saya memanggil jQuery.ajax, yang saya pikir cukup pintar untuk mengubah parameter saya menjadi string JSON ketika contentType adalah 'application/json'. Sepertinya saya harus secara manual merangkai parameter JSON daripada melewati JSON dan meminta jQuery untuk mengubahnya.

Jadi ini adalah panggilan buruk:

$.ajax({
        url: myEndpoint,
        type: 'POST',
        crossDomain: true,
        data: {
            url: $('#url').val()
        },
        headers: {
            "X-Api-Key": 'blablabla'
        },
        dataType: 'json',
        contentType: "application/json",
        success: function (data) {
            console.info(data);
        }
    });

Dan ini adalah panggilan yang tepat:

 $.ajax({
        url: myEndpoint,
        type: 'POST',
        crossDomain: true,
        data: JSON.stringify({
            url: $('#url').val()
        }),
        headers: {
            "X-Api-Key": 'blablabla'
        },
        dataType: 'json',
        contentType: "application/json",
        success: function (data) {
            console.info(data);
        }
    });

Ini bisa menjadi petunjuk jika Anda men-debug masalah seperti itu dengan CORS: cukup unduh AWS APIG SDK dan coba jalankan panggilan menggunakan apigClient yang disediakan oleh AWS dan bandingkan header dengan yang Anda dapatkan dengan klien khusus Anda . Saat memeriksa 2 set tajuk yang saya dapatkan dengan jQuery dan apigClient, saya perhatikan Muatan Payload tampak berbeda dan itulah cara saya menyadari bahwa formatnya salah, kemudian kode 400 dan Tidak 'Access-Control-Allow-Origin' header hadir semua masuk akal.

Saya harap ini membantu.

14
HBR

Saya memiliki masalah serupa, tetapi dengan integrasi proxy lambda:

  • CORS diaktifkan pada AWS API Gateway menggunakan browser

  • integrasi lambda-proxy diaktifkan

Saat menggunakan integrasi proxy lambda, Anda dapat mengembalikan header khusus dari dalam kode lambda:

        var result = {
        statusCode: data.statusCode | 200,
        headers: {
          "Access-Control-Allow-Origin": "*"
        },
        body: JSON.stringify(responseBody)
    };
    callback(null, result);

Dengan cara ini Anda mendapatkan header CORS dikirim . Saya pikir mungkin ada cara yang lebih baik untuk membuatnya bekerja dengan integrasi proxy lambda tanpa menyambungkan CORS di dalam kode lambda, beri tahu saya jika Anda tahu.

9
arseneoaa

Saya memiliki masalah yang sama - dan itu tidak ada hubungannya dengan cara API dikonfigurasi atau permintaan POST yang saya buat di front-end. Apa yang memperbaiki masalah bagi saya adalah menggunakan API pada AWS API Gateway. Setelah Anda membuat metode/sumber daya API, dan mengikatnya ke fungsi lambda, mereka tidak akan digunakan secara otomatis.

Anda harus mengklik "Tindakan" dan kemudian "Menyebarkan API" untuk mengakses Layanan Mikro ini dari front-end.

3
Marquistador

untuk menyelesaikan ini saya hadir untuk Anda saya konfigurasi Post di gateway apy

Metode opsi - Integrasi REsponse - Pemetaan Header

X-Requested-With '*'
Access-Control-Allow-Headers 'Content-Type,x-requested-with,Access-Control-Allow-Origin,Access-Control-Allow-Headers,Access-Control-Allow-Methods'
Access-Control-Allow-Origin 'http://localhost:4200'
Access-Control-Allow-Methods 'POST,OPTIONS'

Metode Posting - Respons Integrasi - Pemetaan Header

Access-Control-Allow-Origin "*" ---> can be changed by your ip obviously

Saya harap ini membantu Anda

2
Andres Navarro

Ada banyak posting yang mengarahkan Anda untuk memastikan fungsi lambda mengembalikan header CORS yang sesuai, dan semuanya benar. Namun, itu jugacriticalbahwa objek json diikat menggunakan JSON.stringify (). Tampaknya Postman melakukan ini untuk kita, sehingga menyesatkan ketika Postman meminta dan $ .ajax meminta mengirim objek json yang sama; namun satu berhasil dan satu gagal.

0
rickfarina

Jika Anda menggunakan integrasi proxy di API Gateway, maka mengaktifkan CORS dari API Gateway tidak berfungsi. Anda harus mengatur Header 'Access-Control-Allow-Origin' dari kode Lambda Anda sendiri.

Disebutkan di doc .

Contoh kode python:

    response = {
        'statusCode': 200,
        'headers': {
            'Access-Control-Allow-Origin': '*'
        },
        'body': json.dumps({'message': 'CORS enabled')
    }
    return response
0
Dawn T Cherian