在飞行前响应中,Access-Control-Allow-Header不允许使用Access-Control-allow-origin [英] Access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response

查看:268
本文介绍了在飞行前响应中,Access-Control-Allow-Header不允许使用Access-Control-allow-origin的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经使用Express(node.js)准备了Lambda函数,并且还启用了带有IAM的授权.

I have prepared an Lambda function using Express(node.js) and enabled the Authorization with IAM as well.

该API在Postman中按以下链接工作: https://www.youtube.com/watch?v=KXyATZctkmQ&t= 35s

The API is working in the Postman as per below link : https://www.youtube.com/watch?v=KXyATZctkmQ&t=35s

由于我对CORS政策和API概念还很陌生.我正在尝试使用Ajax调用来访问示例.

As I'm fairly new with CORS policy and API concepts. I'm trying to access the sample using Ajax call.

到目前为止,我已经按照文档和很少的参考文献准备了授权标头.

So far I have prepared the Authorization Header as per documentation and few reference.

Git回购链接: https://github. com/mudass1r/aws-iam-authorization.git

签名生成参考链接: https://gist.github.com/davidkelley/c1274cffdc0d9d782d7e

我也已通过AWS API Gateway为我的API启用了CORS.

PS:该API使用无服务器框架进行部署.

PS : The API is Deployed using Serverless Framework.

第1步:当我不包含任何标题时,我会遇到以下错误:

第2步:稍后添加标头时:

$.ajax(Signer(credentials, {
  url: <AWS API URL>,
  type: 'GET',
  dataType: 'json',
  async: true,
  crossDomain: true,
  contentType: 'application/json',
  headers: {
    "Access-Control-Allow-Origin" : "*"
  },
  success: function(data) {
    console.log(data);
  }
}));

此后出现以下错误:

After which I get the following error:

根据我以前关于此错误的经验,我们仅需要为API启用CORS,即可解决此问题.但是在这种情况下并非如此.以下是API资源的结构.

In my previous experience with this error we only need to enable the CORS for the API which resolves this issue. But the same is not in this cases. Following is the structure of the API resource.

我在这个问题上停留了几天,还遇到了一些CORS政策参考链接. https://fetch.spec.whatwg.org/#http-cors-protocol

I have been stuck in this problem for few day and came across some CORS policy reference links as well. https://fetch.spec.whatwg.org/#http-cors-protocol

感谢大家的投入和帮助.

Thanks everyone for your inputs and help.

推荐答案

答案:

首先,问题不在标题内容中.它是在我为AWS API Gateway授权生成的授权字符串中.

First of all the problem was not in header content. It was in the Authorization String which I was generating for AWS API Gateway authorization.

如@sideshowbarker所指出.我们不需要在ajax调用中添加任何标头.

As pointed by @sideshowbarker. We don't need to add any headers in the ajax call.

响应标头足以处理API调用.

The response header are enough to handle the API call.

app.use(cors())

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method,X-Access-Token,XKey,Authorization');
    next();
});

我也切换到Firefox调试API调用,在该错误中发现以下错误.

Also I switched to Firefox for debugging the API call, where I found following errors.

因为我改用Firefox,所以可以看到来自AWS的响应,可以从中进一步调试和解决问题.

Because I switched to Firefox, I could see the response from AWS from which I could further debug and fix the issue.

CanonicalRequest函数中的问题:

Issue in the CanonicalRequest function :

之前

'content-type;host;x-amz-date;'

之后

'content-type;host;x-amz-date'

感谢大家的投入和帮助.

Thanks everyone for your inputs and help.

我已经更新了git repo.请参考相同. https://github.com/mudass1r/aws-iam-authorization

I have updated the git repo. Please refer the same. https://github.com/mudass1r/aws-iam-authorization

这篇关于在飞行前响应中,Access-Control-Allow-Header不允许使用Access-Control-allow-origin的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆