reactjs POST时出现CORS错误(Lambda服务器、React客户端)

6fe3ivhb 于 2022-12-22 发布在 React

关注(0)|答案(1)|浏览(207)

我已经从服务器获取了一个工作的cors配置。更改POST的参数会出现以下错误
跨来源请求被阻止：同源策略不允许阅读https：//上的远程资源...（原因：CORS预检响应未成功）。状态代码：422.
跨来源请求被阻止：同源策略不允许阅读https：//上的远程资源...（原因：CORS请求未成功）。状态代码：（无效）。
这些是我在客户端和服务器端使用的参数。

//React(fetch):
const fetch_params = {
      method: 'POST',
      mode: "cors", //Doesn't seem to be needed for the GET
      body: JSON.stringify(fetch_body),
      headers: new Headers({
        "Content-Type": 'application/json'
      })
    }

//Lambda(Node):
response_headers: {
    "Access-Control-Allow-Headers" : "Content-Type",
    "Access-Control-Allow-Origin": event.headers.origin, //Essentially returns the same origin as received
    "Access-Control-Allow-Methods": "OPTIONS,POST,GET"
        }

即使我在localhost上运行react应用程序时，上面的配置也适用于GET，但是现在即使应用程序托管在带https的aws-amplify上，它也会在POST时出错。
(The amplify和lambda位于不同的VPC（？）上，目前无法在同一个VPC中运行）

reactjs

来源：https://stackoverflow.com/questions/74877938/cors-error-on-post-lambda-server-react-client

1条答案

按热度按时间

pw9qyyiw1#

所以问题是，当发出OPTIONS请求时，我的代码只看到body/path中的空参数，并返回422错误。
代码本身返回了一条详细的错误消息，但浏览器将422错误解释为CORS问题，并隐藏了错误消息。
在硬编码响应代码200之后，我看到了错误消息并找到了解决方案：

if(event.requestContext.http.method == "OPTIONS")
{
    const response = {
        statusCode: 200,
        headers: {
            "Access-Control-Allow-Headers": "Content-Type",
            "Access-Control-Allow-Origin": event.headers.origin,
            "Access-Control-Allow-Methods": "OPTIONS,POST,GET"
        },
        body: "Processed Successfully"
    };

    return response;
}

以上内容正确响应OPTIONS请求，因此后续POST可以正常继续。

赞(0）回复(0）举报 2022-12-22

我来回答

reactjs POST时出现CORS错误(Lambda服务器、React客户端)

1条答案

相关问题

热门标签

最新问答