英文:
Trouble interpereting a 401 + CORS on a preflight request
问题
我正在集成一个来自第三方供应商的新API。我在我的主机笔记本上的虚拟机中运行API。在使用Postman进行POST请求时，一切正常，我会收到响应。然而，在浏览器中（Chrome或Firefox），浏览器会发出一个OPTIONS请求，该请求被拒绝并返回401，然后真实请求被拒绝为CORS错误。
由于CORS策略的原因，已阻止从源 'http://localhost:3000' 访问 'https://192.168.1.92/area' 的XMLHttpRequest: 对预检请求的响应未通过访问控制检查: 它没有HTTP OK状态。
API需要通过设置 key 头进行身份验证，我在axios中这样做：
axios
.post(`${BASE_URL}/area`, body, {
headers: {
key: "1-e6c459512a6118bba516cb8ee6831f81ba55b96e",
},
})
.then((res) => {
return res.data;
})
.catch(() => {
// 处理错误
});
我发送了请求，但是在Ajax CORS请求中，预检返回http 401中的讨论表明自定义头部不会在预检请求中发送。因此，预检将被拒绝为401，然后真实请求将被拒绝为CORS问题。
如您所见，预检不包含 key 头：
实际请求确实包含头部，但因为预检被拒绝，所以被拒绝为CORS问题：
我这里做错了什么吗？我是否正确理解了这里发生的情况？在这种情况下，似乎CORS是一个误称。问题可能是API服务器未设置为接受预检请求并直接拒绝它们，因为它们没有 key 头。在我要求API供应商解决此问题/进行更改之前，我想确保我没有任何可以解决此问题的方法。
英文:
I am integrating a new API from a third party vendor. I'm running the API from within a VM on my host laptop. When making a POST request via postman, I have 0 issues, and I get a response back. However, within the browser (chrome or firefox), the browser makes an OPTIONS request, which is rejected with a 401, and then the real request is rejected as a CORS error.
> Access to XMLHttpRequest at 'https://192.168.1.92/area' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
The api requires authentication by setting a key header, which I do with axios:
axios
.post(`${BASE_URL}/area`, body, {
headers: {
key: "1-e6c459512a6118bba516cb8ee6831f81ba55b96e",
},
})
.then((res) => {
return res.data;
})
.catch(() => {
// handle error
});
I send the request, but the discussion in Ajax CORS Request with http 401 in preflight suggests that custom headers are not sent in the preflight request. Because of this, the preflight is rejected with a 401, and then the real request is rejected as a CORS issue.
As you see, the preflight does not contain the key header:
And the actual request does contain the header, but is rejected as a CORS issue because the preflight was rejected:
Is there something I'm doing wrong here? Am I correctly intepereting what is happening here? Seems like CORS is a misnomer in this case. The issue may be that the API server is not set up to accept preflight requests and rejects them outright because they have no key header. I'd like to make sure there's nothing I can do to fix this before I ask the API vendor to look into this / make a change.
答案1
得分: 2
然而，在浏览器（chrome或firefox）中，浏览器发出了一个OPTIONS请求，该请求被拒绝并返回401，然后实际请求也被拒绝，报CORS错误。
是的。服务器尚未实施所需的CORS功能，以允许跨源浏览器端的JavaScript访问API。
而且实际请求确实包含了这个头部...
...好吧，如果它被发送的话。网络视图显示了请求的初步详情，但由于您没有通过CORS获得权限，它已被阻止。
问题可能是API服务器没有设置接受预检请求并将其直接拒绝，因为它们没有关键头部。在我向API供应商提出请求或更改之前，我想确保我没有办法修复这个问题。
由于API期望一个密钥，很可能这个密钥被认为是秘密。在这种情况下，支持服务端代码访问API才有意义，因为它旨在由密钥所有者访问，而不是（直接）由密钥所有者网站的每个访问者访问。（也就是说，您应该编写服务器端代码，以在支持您为访问者提供的功能所需的有限方式下访问API）。
英文:
> However, within the browser (chrome or firefox), the browser makes an OPTIONS request, which is rejected with a 401, and then the real request is rejected as a CORS error.
Yes. The server has not implemented the CORS features required to grant permission to access the API from cross-origin browser-side JavaScript.
> And the actual request does contain the header
… well, it would if it was sent. The network view shows provisional details of the request, but it has been blocked because you don't have permission via CORS.
> The issue may be that the API server is not set up to accept preflight requests and rejects them outright because they have no key header. I'd like to make sure there's nothing I can do to fix this before I ask the API vendor to look into this / make a change.
Since the API expects a key, it is likely that the key is supposed to be a secret. In that case it wouldn't make sense to support CORS on the service because it is intended to be accessed by the key owner and not (directly) by every visitor to the key owners site. (i.e. you are expected to write server-side code which accesses the API in whatever limited ways are needed to support the functionality you provide to your visitors).
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论