ReactJS aws被CORS飞行前政策禁止

如何解决ReactJS aws被CORS飞行前政策禁止

我一直在尝试制作一个简单的帖子请求api，以便我的reactJS前端可以发布帖子，并将其填充在DynamoDB的表中。我已经创建了一个dynamoDB表，并赋予了lambda函数权限来对此表进行请求，并创建了一个API网关来使用url进行其余的api请求。我最初没有在API网关中将集成请求设置为lambda代理，但是根据AWS支持的建议，我已启用它。

这是我在lambda函数（使用api网关（REST API）作为触发器）中使用的代码：

const AWS = require('aws-sdk');
const docClient = new AWS.DynamoDB.DocumentClient({region: "us-east-1"});

exports.handler = (event,context,callback) => {
    console.log("Processing...");
    
    const {name} = JSON.parse(event.body);
    
    const params = {
        TableName: "serverlessAppTest",Item: {
            date: Date.now(),name: name,},};
    
    let responseBody = {
        name: name,}
    
    const response = {
    statusCode: 200,headers: {
        'Access-Control-Allow-Origin': '*','Access-Control-Allow-Credentials': true,"Access-Control-Allow-Headers" : "Content-Type","Access-Control-Allow-Methods": "OPTIONS,POST,GET"
    },body: JSON.stringify(responseBody)
  };
    
    docClient.put(params,function(err,data) {
        if(err){
            callback(err,null);
        } else {
            callback(null,data);
        }
    })
    console.log("response: " +JSON.stringify(response))
    return response;
};

当我尝试在lambda的测试区域中将以下主体插入post api时：

{
  "body": "{\"name\": \"Value from Lambda\"}"
}

我得到200 OK，并且数据填充在dynamoDB表中。它也可以在邮递员中正常工作（200 OK并上传数据）。

当我尝试使用reactjs代码时，会收到以下响应：

Access to XMLHttpRequest at 'https://{apivalhere}.execute-api.us-east-1.amazonaws.com/default/serverlessAPICalls' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是我的reactjs函数，可以通过按按钮进行调用。

import React from "react";
import axios from "axios";

function FormHook() {
    const apiURL =
        "https://{apivalhere}.execute-api.us-east-1.amazonaws.com/default/serverlessAPICalls";

    const submitHandler = (e) => {
        e.preventDefault();
        console.log("did it");
        const headerData = {
            "Access-Control-Allow-Origin": "*","Access-Control-Allow-Credentials": true,"Access-Control-Allow-Headers":
                "Origin,Content-Type,X-Auth-Token","Access-Control-Allow-Methods":
                "GET,PATCH,PUT,DELETE,OPTIONS",};
        axios
            .post(
                apiURL,{
                    name: "Hello from reactjs!",message: "this is the message field.",{
                    headers: headerData,}
            )
            .then((res) => {
                console.log(res);
                console.log(res.data);
            })
            .catch((err) => {
                console.log(err);
            });
    };

    return (
        <div>
            <form onSubmit={submitHandler}>
                <button type="submit">Send</button>
            </form>
        </div>
    );
}
export default FormHook;

我已经阅读了有关十几个或更多关于stackoverflow的文档，并且aws支持试图解决此问题，但我一直被这个cors问题所困扰。我已经尝试在标头中专门说明“ application / json”，并明确允许“ localhost：3000”，然后在“控件允许来源”中为lambda node.js代码和reactjs post方法尝试了“ *”。我完全无法解决此问题，可以使用一些帮助。我相对较新，我拥有自己的函数来处理api请求，因此任何指导或建议都将不胜感激。

编辑： 我也收到以下相同的CORS错误。

import React from "react";
import axios from "axios";

function FormHook() {
    const apiURL =
        "https://{apivalhere}.execute-api.us-east-1.amazonaws.com/default/serverlessAPICalls";

    const submitHandler = (e) => {
        e.preventDefault();
        console.log("did it");
        axios
            .post(
                apiURL,)
            .then((res) => {
                console.log(res);
                console.log(res.data);
            })
            .catch((err) => {
                console.log(err);
            });
    };

    return (
        <div>
            <form onSubmit={submitHandler}>
                <button type="submit">Send</button>
            </form>
        </div>
    );
}
export default FormHook;

解决方法

特别是对于我的设置，问题出在我的api网关配置和lambda中的进程中。我没有处理OPTIONS请求，这导致了错误的网关（502错误）。为了解决这个问题，我在api网关中将OPTIONS方法集成请求类型设置为MOCK。这将导致api网关仅剔除它收到的所有OPTIONS请求，并允许以下发布请求通过。

这绝对不是最佳实践，并且将进行更新以更优雅地处理OPTIONS请求，但现在可以正常工作。

,

这篇很棒的文章解释了解决方案：AWS CORS Policy with React

你必须仔细阅读每一个细节，我也读了好几遍，以了解如何正确设置每个请求的标头。