获取请求在浏览器中失败(使用React框架)

Question

我试图用Authorizer头发送一个API请求。这个请求适用于curl和Postman：邮递员反应。

如果我发送GET请求时没有Authorizer报头，它将按预期工作，但一旦添加标头，它就会发送预飞选项，结果失败。

这是我的密码：

​

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 () CORS策略阻止了从源'https://qrdc992lul.execute-api.eu-west-1.amazonaws.com/dev/account‘访问https://qrdc992lul.execute-api.eu-west-1.amazonaws.com/dev/account的策略:对飞行前请求的响应不通过访问控制检查:请求的资源上不存在“访问控制-允许-原产地”报头。

响应头：

内容长度: 42内容-类型:应用程序/json日期: Tue 2020年2月4日13:09:37 GMT状态: 403 via: 1.1 37adc88abfddc6deef6672a655706cd4.cloudfront.net ( cloudfront ) x-amz-apigw-id: HX36rHhxDoEFXxw= x-amz-cf-id: hgFvoQwvQ96Uge3ciwwvd41RCNyX1oZyVydPIyXqPQxe0aAeklM2WA== x-amz-cf-pop: C3 50-C3 amzn-errortype: MissingAuthenticationTokenException x-amzn-requestid: 4383a667-e30b-44fb-ac3b-bd532e99f1d4x-cache:来源于云前线

我读了一篇关于CORS头和预飞行的文章，我觉得问题是响应头中没有访问控制-允许-原产地，但是不知道如何解决这个问题。

我已经将代码片段添加到Codesandbox：https://codesandbox.io/s/fragrant-river-ogx7o中

API是API网关Lambda代理集成。

我还在学习反应，我觉得我发送的请求是错误的。我遗漏了什么？

更新：API网关被设置为返回报头

Answer 1

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

• 由于飞行前发送选项请求，这也需要一个API端点。因此，您需要GET和选项，并为两者设置方法响应头。 /account 到达 选项

API网关->资源->操作->启用CORS将指导您完成该做的工作。

• 代码是错误的。按照Anurag的建议，req.withCreditentials = true；已删除

Answer 2

在后端，您需要使用访问-控制-允许-头对要添加的标题进行授权(这是要添加的标题“授权”)