CORS标头“ Access-Control-Allow-Origin”缺少错误,但它*在*标头中

时间:2020-08-30 13:27:40

标签: javascript amazon-web-services cors

谢谢。我已经搜索了一段时间,但是这里的大多数CORS问题似乎都是关于如何启用或解决CORS的问题。那不是我的问题。我的问题是我的应用程序(在本地主机上运行的React.js)在标题中给了我CORS错误,而响应中显然是“ Access-Control-Allow-Origin”标头。请参见Postman和Firefox输出的屏幕截图: postman and firefox output

编辑:根据@ T.J。拥挤者,我将输出复制为以下文本:

Firefox控制台输出:

GEThttps://#####.execute-api.us-east-1.amazonaws.com/prod/asset-accounts [HTTP / 2 200 OK 212ms]

XHROPTIONShttps://#####.execute-api.us-east-1.amazonaws.com/prod/asset-accounts/newVal [HTTP / 2 200 OK 32ms]

XHRPOSThttps://#####.execute-api.us-east-1.amazonaws.com/prod/asset-accounts/newVal [HTTP / 2 400错误请求39ms] 跨域请求被阻止:相同来源策略不允许在https://#####.execute-api.us-east-1.amazonaws.com/prod/asset-accounts/newVal上读取远程资源。 (原因:CORS标头“ Access-Control-Allow-Origin”缺失)。

邮递员中的响应头

日期→格林尼治标准时间2020年8月30日星期日12:52:35内容类型→application / json 内容长度→2连接→保持活动状态x-amzn-RequestId →72437f3b-4541-4c36-b425-dbccb9d75b9e访问控制允许来源→* x-amz-apigw-id→SFYbCHGXoAMF6eg = X-Amzn-Trace-Id →Root = 1-5f4ba113-bdab0ab0557f0e505bc9cba4; Sampled = 0

技术背景

首先,我是AWS和React的新手。如果我错过了一些新奇的事情,请原谅。

我已经通过AWS API Gateway设置了一个AWS Lambda(node.js 12)发布方法。我已启用该方法的CORS。我的后端Lambda发送“ Access-Control-Allow-Origin”标头作为响应。

   const response = {
        statusCode: statusCode,
        headers: {
            "Content-Type": "application/json",
            "Access-Control-Allow-Origin": "*"
        },
        body: responseBody,
    };
    return response;

我的前端是一个在localhost:3000上运行的React.js应用程序。我正在按以下方式调用帖子:

try {
  const params = {
    "assetAccountId": 'newVal',
    "balance": 0,
    "householdId": "headerVal",
    "isOpen": true,
    "nickName": this.state.newassetAccount.assetAccountNickName,
    "rate": 0.043
  };
  const headers = {
    'Content-Type': 'application/json',
    'household-id': 'fcdfea8b-dbc9-475f-8508-27b64101ce6c',
  };
  await axios.post(`${config.api.invokeUrl}/asset-accounts/newVal`, params, headers);
  this.setState({
    assetAccounts: [...this.state.assetAccounts, this.state.newassetAccount]
  });
  this.setState({
    newassetAccount: {
      "assetAccountNickName": "",
      "id": ""
    }
  });
} catch (err) {
  console.log(`An error has occurred: ${err}`);
}

值得注意的是,我已经使用了get方法,并且如您在图像中所见,Firefox在帖子发布之前调用了一个选项请求。我在AWS API网关中看不到get,post和选项CORS设置或响应头之间的任何区别。

有人可以指出我的正确方向吗?

0 个答案:

没有答案