Aws Api 網關/Lambda python dynamodb 適用於 postman 但不適用於網頁

Question

我有一個 lambda_function.py

import json
from dynamodb import put_user

def lambda_handler(event, context):

data = json.loads(event["body"])


username = data["username"]
age = data["age"]
name = data["name"]

put_user(username,age,name)
return {
    'statusCode': 200,
    'headers': {
        'Access-Control-Allow-Headers': 'Content-Type',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'OPTIONS,POST'
    },
    'body': json.dumps('Hello from Lambda!')
}

和 dynamodb.py

from pprint import pprint
import boto3

def put_user(username, age, name, dynamodb=None):
 if not dynamodb:
    dynamodb = boto3.resource('dynamodb', region_name='us-east-2')

 table = dynamodb.Table('UsersTable')
 response = table.put_item(
  Item={
        'Username': username,
        'Age': age,
        'Name': name
    }
 )
 return response

當我從 POSTMAN 調用它時，我創建了一個 API 網關，該網關具有有效的 POST 方法（並將項目放入 dynamodb 表中）。

但是，當我在 Flask 服務器（/static/script.js）中使用 javascript 獲取時，我無法使其工作：

button.addEventListener('click', () => {
    let body_info = {
        "username" : username.textContent,
        "age" : age.textContent,
        "name" : Name.textContent
    }

    fetch(url, {
        method: 'POST',
        body: JSON.stringify(body_info),
        headers: {
            "Content-type": "application/json",
            "Origin": origin2
        }
    })
        .then(res => res.json())
        .then(data => console.log(data))
        .catch(err => console.log('Request failed', err))
})

Firefox 控制台錯誤

我一直在嘗試調試應用程序，發現如果評論

put_user(username,age,name)

然后 Firefox 控制台沒有顯示任何錯誤，我從 api 網關得到響應

有任何想法嗎？

Answer 1

您正在描述CORS錯誤。 基本上，您的 web 瀏覽器期望服務器返回 CORS 標准所需的 HTTP 標頭，但它沒有這樣做。

確保在 API 網關上啟用 CORS並重新部署 API，然后再次測試。

如果您的問題仍然存在，您可以嘗試從 lambda function 中返回 CORS 標頭

Answer 2

問題是，

button.addEventListener('click', () => {
    let body_info = {
        "username" : username.textContent,
        "age" : age.textContent,
        "name" : Name.textContent
    }

是一個空的 object，因為它是一個輸入 html，並且可以通過.value而不是 a.textContent 看到它的內容。

修復后，fetch 發送了一個有效的主體，apigateway、lambda 和 dynamodb 正確執行！