在飞行前响应中,Access-Control-Allow-Header不允许使用Access-Control-allow-origin [英] Access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response
问题描述
我已经使用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屋!