Google Chrome Calling Express API - CORS政策已阻止从源站'http://localhost:3000'获取的访问

Question

我有一个用Express/nodeJS编写的API，它托管在GCloud中。紧身胸衣已启用并响应"OPTIONS"请求。当我试图在本地服务器上调用API时，我可以访问API。当我尝试在部署后访问api时，我会得到以下错误：

Access to fetch at 'https://___.com/player' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我可以在Chrome中看到对"OPTIONS"的调用，它返回以下标题：

access-control-allow-methods: GET,HEAD,PUT,PATCH,POST,DELETE
access-control-allow-origin: *
alt-svc: clear
content-length: 0
date: Tue, 05 May 2020 18:40:13 GMT
status: 204
vary: Access-Control-Request-Headers
via: 1.1 google
x-powered-by: Express 

我的请求如下：

accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9
authorization: Bearer cache-control: no-cache
content-length: 31
content-type: text/plain;charset=UTF-8
origin: http://localhost:3000
pragma: no-cache
referer: http://localhost:3000/
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: cross-site
sessionid: 
user-agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.122 Safari/537.36 

我从React的提取电话是：

const response = await fetch(
'https://___.com/player',
{
method: 'patch',
mode: 'cors',
credentials: 'same-origin',
headers: new Headers({
authorization: 'Bearer ' + appState.User.token,
sessionId: `${appState.SessionId}`,
}),
body: patch,
}
); 

如有任何帮助，我们将不胜感激。

Answer 1

好的，经过一整天的测试，我们终于找到了答案。这根本不是CORS错误，Chrome报告了这一错误，这引起了混乱。此外，这在穿越Fiddler时也是有效的。

事实证明，fetch中的方法区分大小写。将补丁更改为patch解决了问题。