GET 请求预检在浏览器中失败（使用 React 框架）

Posted 2023-02-22

【中文标题】GET 请求预检在浏览器中失败（使用 React 框架）

【英文标题】：GET request preflight fails in browser (using React framework)

【发布时间】：2020-05-20 08:06:23

【问题描述】：

我正在尝试使用 Authorizer 标头发送 API GET 请求。该请求适用于 curl 和 Postman：Postman response

如果我发送没有 Authorizer 标头的 GET 请求，它会按预期工作，但只要我添加标头，它就会发送预检 OPTIONS 并且它会失败。

这是我的代码：

function GetData() 
    var req = new XMLHttpRequest();
    req.addEventListener("load", () => 
      console.log(req.responseText);
    );
    req.open(
      "GET",
      "https://qrdc992lul.execute-api.eu-west-1.amazonaws.com/dev/account"
    );
    req.setRequestHeader("Authorization", "Bearer " + token);
    req.withCredentials = true;
    req.send();
  

我收到以下回复：

加载资源失败：服务器响应状态为403()

访问 XMLHttpRequest 在 'https://qrdc992lul.execute-api.eu-west-1.amazonaws.com/dev/account' 来自原点 'https://ogx7o.csb.app' 已被 CORS 策略阻止： 对预检请求的响应未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。

响应头：

内容长度：42 内容类型：应用程序/json 日期：2 月 4 日星期二 2020 年 13:09:37 GMT 状态：403 通过：1.1 37adc88abfddc6deef6672a655706cd4.cloudfront.net (CloudFront) x-amz-apigw-id: HX36rHhxDoEFXxw= x-amz-cf-id: hgFvoQwvQ96Uge3ciwwvd41RCNyX1oZyVydPIyXqPQxe0aAeklM2WA== x-amz-cf-pop： MAN50-C3 x-amzn-errortype: MissingAuthenticationTokenException x-amzn-requestid: 4383a667-e30b-44fb-ac3b-bd532e99f1d4 x-cache: 错误 来自云端

我阅读了有关 CORS 标头和预检的信息，我有点想问题是响应标头中没有 Access-Control-Allow-Origin 但不知道如何解决该问题。

我已将代码 sn-p 添加到 Codesandbox： https://codesandbox.io/s/fragrant-river-ogx7o

API 是 API Gateway Lambda 代理集成。

我还在学习 React，我感觉我发送的请求是错误的。我错过了什么？

更新： API Gateway is set to return the headers

【问题讨论】：

这能回答你的问题吗？ XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header

尝试删除req.withCredentials = true; 行

【参考方案1】：

我找到了答案。 万一以后有人发现这个问题，我解决了以下方法：

作为预检发送 OPTIONS 请求，这也需要一个 API 端点。因此，您需要 GET 和 OPTIONS，并为两者设置方法响应标头。

/帐户 获取 选项

API 网关 -> 资源 -> 操作 -> 启用 CORS 指导您完成操作

代码不正确。正如 Anurag Hazra 所建议的那样， req.withCreditentials = true;已删除

【参考方案2】：

在您的后端，您需要授权您添加的标头 使用Access-Control-Allow-Headers （这是您添加的标题“授权”）