API Gateway CORS: ไม่มีส่วนหัว 'Access-Control-Allow-Origin'

แม้ว่า CORS จะได้รับการตั้งค่าผ่าน API Gateway และAccess-Control-Allow-Originตั้งค่าส่วนหัวแล้ว แต่ฉันยังคงได้รับข้อผิดพลาดต่อไปนี้เมื่อพยายามเรียก API จาก AJAX ภายใน Chrome:

XMLHttpRequest ไม่สามารถโหลดhttp://XXXXX.execute-api.us-west-2.amazonaws.com/beta/YYYYY ไม่มีส่วนหัว "Access-Control-Allow-Origin" ในทรัพยากรที่ร้องขอ Origin 'null' จึงไม่อนุญาตให้เข้าถึง การตอบสนองมีรหัสสถานะ HTTP 403

ฉันพยายามรับ URL ผ่านบุรุษไปรษณีย์และแสดงให้เห็นว่าส่วนหัวด้านบนถูกส่งผ่านเรียบร้อยแล้ว:

และจากการตอบกลับของ OPTIONS:

ฉันจะเรียก API จากเบราว์เซอร์โดยไม่เปลี่ยนกลับเป็น JSON-P ได้อย่างไร

ฉันได้รับปัญหาเดียวกัน ฉันใช้ 10 ชั่วโมงในการค้นหา

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);
};

หากมีใครพบปัญหานี้ - ฉันสามารถติดตามสาเหตุที่แท้จริงในแอปพลิเคชันของฉันได้

หากคุณใช้ API-Gateway ด้วย Authorizers ที่กำหนดเอง - API-Gateway จะส่ง 401 หรือ 403 กลับก่อนที่จะเข้าสู่เซิร์ฟเวอร์ของคุณจริง โดยค่าเริ่มต้น - ไม่ได้กำหนดค่า API-Gateway สำหรับ CORS เมื่อส่งคืน 4xx จากผู้เขียนแบบกำหนดเอง

นอกจากนี้ - หากคุณได้รับรหัสสถานะ0หรือ1จากคำขอที่ทำงานผ่าน API Gateway นี่อาจเป็นปัญหาของคุณ

ในการแก้ไข - ในการกำหนดค่า API Gateway ให้ไปที่ "Gateway Responses" ขยาย "Default 4XX" และเพิ่มส่วนหัวการกำหนดค่า CORS ที่นั่น กล่าวคือ

Access-Control-Allow-Origin: '*'

อย่าลืมปรับใช้เกตเวย์ของคุณอีกครั้ง - และ voila!

1)ฉันต้องทำเช่นเดียวกับ @riseres และการเปลี่ยนแปลงอื่น ๆ นี่คือส่วนหัวการตอบกลับของฉัน:

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) และ

ตามเอกสารนี้:

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

เมื่อคุณใช้พร็อกซีสำหรับฟังก์ชันแลมบ์ดาในการกำหนดค่า API เกตเวย์วิธีการโพสต์หรือรับจะไม่มีส่วนหัวเพิ่มเติมมีเพียงตัวเลือกเท่านั้นที่ทำ คุณต้องดำเนินการด้วยตนเองในการตอบกลับ (การตอบสนองของเซิร์ฟเวอร์หรือแลมบ์ดา)

3) และ

นอกจากนั้นฉันต้องปิดใช้งานตัวเลือก 'ต้องใช้คีย์ API' ในวิธีการโพสต์เกตเวย์ API ของฉัน

หากคุณได้ลองทุกอย่างเกี่ยวกับปัญหานี้แล้ว แต่ก็ไม่มีประโยชน์คุณจะพบกับสิ่งที่ฉันทำ ปรากฎว่าทิศทางการตั้งค่า CORS ที่มีอยู่ของ Amazon ทำงานได้ดี ... อย่าลืมปรับใช้อีกครั้ง ! วิซาร์ดการแก้ไข CORS แม้จะมีเครื่องหมายถูกสีเขียวเล็ก ๆ น้อย ๆ แต่ก็ไม่ได้ทำการอัปเดต API ของคุณแบบสด อาจจะชัดเจน แต่มันทำให้ฉันนิ่งงันไปครึ่งวัน

ทำให้ตัวอย่างของฉันใช้งานได้: ฉันเพิ่งใส่'Access-Control-Allow-Origin': '*'ในส่วนหัว: {}ในฟังก์ชัน nodejs Lambda ที่สร้างขึ้น ฉันไม่ได้ทำการเปลี่ยนแปลงกับเลเยอร์ API ที่สร้างโดย Lambda

นี่คือ NodeJS ของฉัน:

'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 ) {
        ...
    }
};

นี่คือสาย AJAX ของฉัน

$.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(); }
});

สำหรับ Googler:

นี่คือเหตุผล:

• คำของ่ายๆหรือGET/ POSTโดยไม่มีคุกกี้จะไม่ทำให้เกิดไฟหน้า
• เมื่อคุณกำหนดค่า CORS สำหรับเส้นทาง API Gateway จะสร้างเฉพาะOPTIONSเมธอดสำหรับเส้นทางนั้นจากนั้นส่งAllow-Originส่วนหัวโดยใช้การตอบสนองแบบจำลองเมื่อผู้ใช้โทรOPTIONSแต่GET/ POSTจะไม่ได้รับAllow-Originโดยอัตโนมัติ
• หากคุณพยายามส่งคำขอธรรมดาโดยเปิดโหมด CORS คุณจะได้รับข้อผิดพลาดเนื่องจากการตอบกลับนั้นไม่มีAllow-Originส่วนหัว
• คุณอาจปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดคำของ่ายๆไม่ได้มีไว้เพื่อส่งการตอบกลับไปยังผู้ใช้ส่งการรับรองความถูกต้อง / คุกกี้พร้อมกับคำขอของคุณที่จะทำให้ "ไม่ง่าย" และการตั้งค่าล่วงหน้าจะทริกเกอร์
• ถึงกระนั้นคุณจะต้องส่งส่วนหัว CORS ด้วยตัวเองสำหรับคำขอต่อไปนี้ OPTIONS

สรุปได้:

• OPTIONSAPI Gateway จะสร้างขึ้นโดยอัตโนมัติเท่านั้นที่ไม่เป็นอันตราย
• OPTIONSเบราว์เซอร์ใช้เป็นมาตรการป้องกันเพื่อตรวจสอบความเป็นไปได้ของ CORS บนเส้นทางเท่านั้น
• CORS ได้รับการยอมรับหรือไม่นั้นขึ้นอยู่กับวิธีการจริงเช่นGET/POST
• คุณต้องส่งส่วนหัวที่เหมาะสมด้วยตนเองในการตอบกลับของคุณ

ฉันเพิ่งเพิ่มส่วนหัวในการตอบสนองฟังก์ชันแลมบ์ดาของฉันและมันทำงานได้อย่างมีเสน่ห์

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

ฉันพบวิธีง่ายๆภายใน

API Gateway> เลือกปลายทาง API ของคุณ> เลือกวิธีการ (ในกรณีของฉันคือ POST)

ตอนนี้มีการดำเนินการแบบเลื่อนลง> เปิดใช้งาน CORS .. เลือกมัน

ตอนนี้เลือกการดำเนินการแบบเลื่อนลงอีกครั้ง> ปรับใช้ API (ปรับใช้ใหม่)

มันได้ผล!

ฉันทำงานของฉันหลังจากที่ฉันรู้ว่าผู้เขียนแลมบ์ดาทำงานล้มเหลวและด้วยเหตุผลที่ไม่ทราบสาเหตุที่แปลเป็นข้อผิดพลาด CORS การแก้ไขอย่างง่ายสำหรับผู้เขียนของฉัน (และการทดสอบผู้เขียนบางอย่างที่ฉันควรเพิ่มไว้ตั้งแต่แรก) และได้ผล สำหรับฉันจำเป็นต้องมีการดำเนินการ API เกตเวย์ 'เปิดใช้งาน CORS' สิ่งนี้ได้เพิ่มส่วนหัวและการตั้งค่าอื่น ๆ ทั้งหมดที่ฉันต้องการใน API ของฉัน

สำหรับฉันคำตอบที่ได้ผลในที่สุดคือความคิดเห็นของ James Shapiro จากคำตอบของ Alex R (โหวตมากที่สุดเป็นอันดับสอง) ฉันพบปัญหา API Gateway นี้ตั้งแต่แรกโดยพยายามรับหน้าเว็บแบบคงที่โฮสต์ใน S3 เพื่อใช้แลมบ์ดาเพื่อประมวลผลหน้าติดต่อเราและส่งอีเมล เพียงตรวจสอบ [] ค่าเริ่มต้น 4XX แก้ไขข้อความแสดงข้อผิดพลาด

หลังจากเปลี่ยนฟังก์ชันหรือรหัสของคุณให้ทำตามสองขั้นตอนนี้

ก่อนอื่นให้เปิดใช้งาน CORSจากนั้นปรับใช้ APIทุกครั้ง

การปรับใช้รหัสหลังจากเปิดใช้งาน CORS สำหรับทั้งคู่POSTและOPTIONSใช้ได้ผลกับฉัน

ฉันกำลังทำงานและในกรณีของฉันที่จำเป็นในการแก้ไขaws-serverless-expresssimple-proxy-api.yaml

ก่อนที่จะกำหนดค่า CORS https://example.comฉันเพิ่งเปลี่ยนชื่อไซต์ของฉันและปรับใช้ใหม่ผ่านทางnpm run setupและอัปเดต lambda / stack ที่มีอยู่แล้ว

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

ในกรณีของฉันเนื่องจากฉันใช้ AWS_IAM เป็นวิธีการอนุญาตสำหรับเกตเวย์ API ฉันจึงต้องให้สิทธิ์บทบาท IAM ของฉันเพื่อเข้าถึงจุดสิ้นสุด

อีกสาเหตุหนึ่งของปัญหานี้อาจเป็นความแตกต่างระหว่าง HTTP / 1.1 และ HTTP / 2

อาการ:ผู้ใช้บางรายไม่ใช่ทั้งหมดรายงานว่าได้รับข้อผิดพลาด CORS เมื่อใช้ซอฟต์แวร์ของเรา

ปัญหา:Access-Control-Allow-Originส่วนหัวที่ขาดหายไปในบางครั้ง

บริบท:เรามีแลมบ์ดาในสถานที่ทุ่มเทให้กับการจัดการOPTIONSการร้องขอและตอบกลับด้วยส่วนหัวของล ธ ที่สอดคล้องกันเช่นการจับคู่ที่อนุญาตพิเศษAccess-Control-Allow-OriginOrigin

วิธีแก้ไข:ดูเหมือนว่า API Gateway จะแปลงส่วนหัวทั้งหมดเป็นตัวพิมพ์เล็กสำหรับการเรียก HTTP / 2 แต่ยังคงใช้ตัวพิมพ์ใหญ่สำหรับ HTTP / 1.1 สิ่งนี้ทำให้การเข้าถึงevent.headers.originล้มเหลว

ตรวจสอบว่าคุณประสบปัญหานี้ด้วยหรือไม่:

สมมติว่า API ของคุณตั้งอยู่ที่https://api.example.comและคุณ front-end https://www.example.comที่ ใช้ CURL ส่งคำขอโดยใช้ HTTP / 2:

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

ผลลัพธ์การตอบสนองควรมีส่วนหัว:

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

ทำซ้ำขั้นตอนเดียวกันโดยใช้ HTTP / 1.1 (หรือใช้Originส่วนหัวตัวพิมพ์เล็ก):

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

หากAccess-Control-Allow-Originส่วนหัวหายไปคุณอาจต้องการตรวจสอบความไวของตัวพิมพ์เล็กและใหญ่เมื่ออ่านOriginส่วนหัว

นอกเหนือจากความคิดเห็นอื่น ๆ สิ่งที่ต้องระวังคือสถานะที่ส่งคืนจากการผสานรวมพื้นฐานของคุณและหากส่วนหัว Access-Control-Allow-Origin ถูกส่งคืนสำหรับสถานะนั้น

การทำสิ่งที่ 'เปิดใช้งาน CORS' จะตั้งค่าสถานะได้ 200 สถานะเท่านั้น หากคุณมีอุปกรณ์อื่น ๆ ในจุดสิ้นสุดเช่น 4xx และ 5xx คุณต้องเพิ่มส่วนหัวด้วยตัวเอง

ในกรณีของฉันฉันแค่เขียน URL คำขอดึงข้อมูลผิด เปิดserverless.ymlคุณตั้งค่าcorsเป็น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}

จากนั้นในตัวจัดการแลมบ์ดาคุณจะส่งส่วนหัว แต่ถ้าคุณสร้างคำขอดึงข้อมูลผิดที่ส่วนหน้าคุณจะไม่ได้รับส่วนหัวนั้นในการตอบกลับและคุณจะได้รับข้อผิดพลาดนี้ ดังนั้นโปรดตรวจสอบ URL คำขอของคุณอีกครั้งที่ด้านหน้า

ใน Python คุณสามารถทำได้ตามโค้ดด้านล่าง:

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