Vercel上的Node无服务器Cors

Question

我在为运行在vercel上的节点功能启用cors时遇到了一些问题。

我在文件api/index.ts

中有以下内容

import type {VercelRequest, VercelResponse} from '@vercel/node';
export default (req: VercelRequest, res: VercelResponse) => {
return res.status(200).json({hello: 'world'});
};

，这是项目根目录下的vercel.json。

{
"headers": [
{
"source": "/api/(.*)",
"headers": [
{ "key": "Access-Control-Allow-Credentials", "value": "true" },
{ "key": "Access-Control-Allow-Origin", "value": "*" },
{ "key": "Access-Control-Allow-Methods", "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT" },
{ "key": "Access-Control-Allow-Headers", "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" }
]
}
]
}

当部署到vercel并从本地主机获取时

fetch('https://myapp.vercel.app/api').then(res => res.json()).then(data => {
document.querySelector('h1').innerHTML = `data`;
});

我得到cors错误，说明Access-Control-Allow-Origin标头缺失

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://myapp.vercel.app/api. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

发送头是否需要额外的设置?

我已经尝试了从谷歌中找到的各种建议，提出的大多数cors问题都是针对Next(我没有使用)的，唯一的深度是在Vercel/node包上(用于类型)。

Answer 1

您已经为匹配模式/api/(.*)的端点指定了CORS策略，

"source": "/api/(.*)",

但是您请求的是/api，而不匹配该模式。请求/api/而不是/api或相应地修改模式应该可以解决问题。

此外，请注意通配符(*)与凭据请求不兼容。因为您似乎不需要带有凭据的请求，所以您应该能够安全地从CORS配置中删除以下行:

{ "key": "Access-Control-Allow-Credentials", "value": "true" },