向 API 网关发出 POST 请求时出现 CORS 错误

Question

我正在向 API 网关上的端点发出 POST 请求，当我发出请求时，出现以下错误：

Access to fetch at 'API_URI' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

POST API_URI net::ERR_FAILED 200
    POSTRequest @ Home.js:17
    getFileData @ Home.js:71
    callCallback @ react-dom.development.js:3945
    invokeGuardedCallbackDev @ react-dom.development.js:3994
    invokeGuardedCallback @ react-dom.development.js:4056
    invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4070
    executeDispatch @ react-dom.development.js:8243
    processDispatchQueueItemsInOrder @ react-dom.development.js:8275
    processDispatchQueue @ react-dom.development.js:8288
    dispatchEventsForPlugins @ react-dom.development.js:8299
    (anonymous) @ react-dom.development.js:8508
    batchedEventUpdates @ react-dom.development.js:22396
    batchedEventUpdates @ react-dom.development.js:3745
    dispatchEventForPluginEventSystem @ react-dom.development.js:8507
    attemptToDispatchEvent @ react-dom.development.js:6005
    dispatchEvent @ react-dom.development.js:5924
    unstable_runWithPriority @ scheduler.development.js:468
    runWithPriority @ react-dom.development.js:11276
    discreteUpdates @ react-dom.development.js:22413
    discreteUpdates @ react-dom.development.js:3756
    dispatchDiscreteEvent @ react-dom.development.js:5889
    Home.js:26 TypeError

TypeError: Failed to fetch
    at POSTRequest (Home.js:17:1)
    at getFileData (Home.js:71:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070:1)
    at executeDispatch (react-dom.development.js:8243:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:8275:1)
    at processDispatchQueue (react-dom.development.js:8288:1)
    at dispatchEventsForPlugins (react-dom.development.js:8299:1)

奇怪的是，我进入cloud watch，在日志中看到API发送的数据没有错误？我还启用了 4xx 和 5xx 错误的 CORS，并在多次执行此操作后暂存 API 以确保不是那样。

这是我发送 POST 请求的代码：

const POSTRequest = (JSONBody) => {
        fetch('API_URI', {
            method: 'POST',
            body : JSON.stringify(JSONBody),
            headers: {'Content-Type': 'application/json'}
        })
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
    }

这是连接到我的 API 端点的 lambda 函数代码，它只是 returns 发送给它的任何数据：

import json

def lambda_handler(event, context):
    data = json.loads(event['body'])
    print(data)
    print(event['body'])
    
    
    return {
        "statusCode": 200,
        "body": json.dumps(data),
        "headers": {
            'Content-Type': 'application/JSON',
        },
    }

Answer 1

您需要在 lambda 函数上设置 CORS headers

参见此处的参考资料： https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

向 API 网关发出 POST 请求时出现 CORS 错误

CORS error when making POST request to API Gateway

reactjs

amazon-web-services

aws-lambda

cors

aws-api-gateway