POST到外部API会抛出CORS，但它可以从Postman开始工作 [英] POSTing to external API throws CORS but it works from Postman
问题描述
我正在使用i mgur api上传图片通过节点js app。
I am using the imgur api to upload images via a node js app.
我正在将图像转换为base64字符串并通过Postman发送它们很棒。
I am converting images to base64 strings and sending them via Postman works great.
我使用 node-fetch 进行api调用。
I use node-fetch to make api calls.
const fetch = require('node-fetch')
...
async uploadImage(base64image) {
try {
const url = 'https://api.imgur.com/3/image'
const res = await fetch(url,
{
method: 'POST',
body: { image: base64image },
headers: {
'content-type': 'application/json',
'Authorization': 'Client-ID [my-client-id]',
'Access-Control-Allow-Headers': 'Content-Type, Authorization, Access-Control-Allow-Headers',
'Access-Control-Allow-Methods': 'POST',
}
}
)
console.log(res)
} catch(err) {
console.log(err)
}
}
< ST rong>错误：
访问' https：//api.imgur 。来自 http：// localhost：3000 '的.com / 3 /图像已被CORS政策：预检响应中 Access-Control-Allow-Headers 不允许请求标题字段 Access-Control-Allow-Headers 。
Error: Access to fetch at 'https://api.imgur.com/3/image' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers in preflight response.
我尝试了很多'Access-Control-Allow-xxx'标题，但没有一个工作..
I have tried many 'Access-Control-Allow-xxx' headers but none of them worked..
我认为它必须是简单的东西我失踪了。我已经被困在这几个小时请帮帮我。
I assume it must be something simple that I am missing. I have been stuck on this for hours please help me.
推荐答案
那是因为 Access-Control-Allow -Headers ， Access-Control-Allow-Methods 是服务器使用的标头。服务器通过中间件附加标头。
That's because Access-Control-Allow-Headers, Access-Control-Allow-Methods are the headers that is used by the server. The server appends the header by a middleware.
现在，假设在启用了CORS的服务器（在下面的示例中为快速服务器）中，这种（默认）标头是设置：
Now, imagine in the server(in this below example an express server) with CORS enabled this kind of (default) headers are getting set:
app.use(function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With, Accept');
});
您发送 Access-Control-Allow-Headers ，服务器将其视为未列入白名单的标头。
And you are sending Access-Control-Allow-Headers from the client side, and server sees that as a header that is not whitelisted.
因此，在标题中只使用以下内容：
So, in headers just use these:
headers: {
'content-type': 'application/json',
'Authorization': 'Client-ID [my-client-id]'
}
它应该可以正常工作。
顺便说一下，我认为它与邮递员合作是因为：
Btw, I think it is working with postman because:
- 如果你没有安装那个小邮差捕获扩展，邮递员就无法设置某些标题。
- 浏览器安全性会停止跨源请求。如果您禁用chrome安全性，它将执行任何CORS请求。
此外，根据这个：
我相信这可能是Chrome不会支持
localhost通过Access-Control-Allow-Origin- 请参阅
Chrome问题
要让Chrome在标头中发送 Access-Control-Allow-Origin ，只需
将/ etc / hosts文件中的localhost别名为某些其他域名，
喜欢：
To have Chrome send Access-Control-Allow-Origin in the header, just
alias your localhost in your /etc/hosts file to some other domain,
like:
127.0.0.1 localhost yourdomain.com
然后，如果您使用 yourdomain.com 而不是
访问您的脚本 localhost ，调用应该成功。
Then if you'd access your script using yourdomain.com instead of
localhost, the call should succeed.
注意：我不认为内容t ype应该是 application / json 它应该像 image / jpeg 之类的东西。或者如果不起作用，也可以不包括该标题。
Note: I don't think the content type should be application/json it should be like image/jpeg or something. Or maybe don't include that header if it doesn't work.
这篇关于POST到外部API会抛出CORS，但它可以从Postman开始工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
