AWS API Gateway返回飛行前響應中Access-Control-Allow-Headers不允許的access-control-allow-origin

Question

這似乎已經被問了一百萬遍了，但是我嘗試將其前端（React）和后端（帶有Node.js的Lambda）都添加進去：

Access-Control-Allow-Headers
Access-Control-Request-Headers
Access-Control-Allow-Methods: 'GET,PUT,POST,DELETE,PATCH,OPTIONS'

但我仍然收到此錯誤：

Access to XMLHttpRequest at 'https://<API-INVOKE-URL>/prod/notes' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

這是我的Lambda代碼來處理響應：

function buildOutput(statusCode, data) {
    let _response = {
        statusCode: statusCode,
        headers: {
            "Access-Control-Allow-Origin": "*"
        },
        body: JSON.stringify(data)
    };
    return _response;
};

這是我的React代碼，用於發送POST請求：

createNote(note) {
        return API.post("notes", "/notes", {
            headers: {
                "Authorization": this.state.token,
                "Access-Control-Allow-Origin": "*"
            },
            body: {
                userid: this.state.username,
                noteid: 'new',
                content: 'from frontend'
            }
        });

• 我已經從控制台測試了Lambda函數，並且該函數可以工作（可以對DynamoDB進行CRUD）。
• 我為我的API網關資源打開了CORS並部署了API。
• 我試過使用PostMan與：

Headers:Content/Type: application/json
Authorization: <MY_TOKEN>
*With and without* Access-Control-Allow-Origin: *

它的工作原理是：請求已成功從PostMan發送到API網關，從而在我的DynamoDB中產生了一個新項目。

Answer 1

CORS需要客戶端和服務器之間的直接連接。 您的瀏覽器可能出於安全原因阻止了連接。

HTTP與HTTPS

我也嘗試在您的瀏覽器上啟用下載。

我相信您也應該在授權標頭中將承載添加到令牌中，例如：

“承載者TOKEN_VALUE”

Answer 2

實際上，在標頭中添加一些數據會將POST請求轉換為OPTIONS。 這樣，它將觸發請求：

1）使用OPTIONS方法

2）獲得對OPTIONS請求的成功響應后，將發生實際的API調用。

要處理CORS，您應該在后端使用它 。

Answer 3

只是為了闡明問題。 某些瀏覽器會對終端進行“預檢”檢查。 這意味着在進行您期望的POST方法調用之前，將使用OPTIONS方法調用端點。 在AWS中，轉到API Gateway並創建一個新資源，選中“創建選項”選項，這將創建您需要添加到端點的默認響應標頭。

Answer 4

感謝大伙們。 我已對您的回答/建議表示贊同 。 我確信他們在大多數情況下都會有所幫助。 我已經弄清楚為什么會出現該錯誤。

我的壞處：我同時擁有兩種資源：

/notes/ (method: any)
/notes/{noteid} (method: any)

並且Invoke URL實際上是AWS API Gateway中的<path>/notes/{noteid} （字符串中包含{} ）。 我以為它會像/notes/:noteid

因此前端代碼應如下所示：

return API.post("notes", "/notes/{noteid}", {...}