英文:
Node serveless Cors on Vercel
问题
I'm having some issues with enabling CORS for a Node function running on Vercel.
我在Vercel上运行的Node函数中启用CORS时遇到了一些问题。
I have the following in a file api/index.ts:
我在文件api/index.ts中有以下内容：
import type {VercelRequest, VercelResponse} from '@vercel/node';
export default (req: VercelRequest, res: VercelResponse) => {
return res.status(200).json({hello: 'world'});
};
and this is the vercel.json in the root of the project:
这是项目根目录中的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" }
]
}
]
}
When deployed to Vercel and fetching from localhost:
在部署到Vercel并从本地进行获取时：
fetch('https://myapp.vercel.app/api').then(res => res.json()).then(data => {
document.querySelector('h1').innerHTML = `data`;
});
I get the CORS error stating that the Access-Control-Allow-Origin header is missing:
我收到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.
Is there additional setup needed for the headers to be sent?
是否需要额外的设置来发送这些头信息？
I have tried various suggestions found from Googling. Most of the CORS issues raised are for Next (which I am not using). The only dependency is on the Vercel/node package (for types).
我尝试了从Google搜索到的各种建议。大多数提出的CORS问题都是针对Next的（我没有使用Next）。唯一的依赖是Vercel/node包（用于类型）。
英文:
Im having some issues with enabling cors for a node function running on vercel.
I have the following in a file api/index.ts
import type {VercelRequest, VercelResponse} from '@vercel/node';
export default (req: VercelRequest, res: VercelResponse) => {
return res.status(200).json({hello: 'world'});
};
and this is the vercel.json in the root of the project.
{
"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" }
]
}
]
}
When deployed to vercel and fetching from a localhost
fetch('https://myapp.vercel.app/api').then(res => res.json()).then(data => {
document.querySelector('h1').innerHTML = `data`;
});
I get the cors error stating that the Access-Control-Allow-Origin header is missing
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.
Is there addition setup needed for the headers to be sent?
I have tried various suggestions found from googling, most of the cors issues raised are for Next ( which I am not using ) the only dep is on the Vercel/node package ( for types ).
答案1
得分: 0
你已经为与模式 /api/(.*) 匹配的端点指定了CORS策略，
"source": "/api/(.*)"
但你正在请求 /api，它不匹配该模式。要么请求 /api/ 而不是 /api，要么相应地修改你的模式应该能解决问题。
此外，请注意通配符(*)与带凭证的请求不兼容。因为你似乎不需要带凭证的请求，你可以安全地从你的CORS配置中删除以下行：
{ "key": "Access-Control-Allow-Credentials", "value": "true" },
英文:
You've specified a CORS policy for endpoints that match pattern /api/(.*),
"source": "/api/(.*)",
but you're requesting /api, which does not match that pattern. Either requesting /api/ instead of /api or modifying your pattern accordingly should solve the issue.
Besides, be aware that the wildcard (*) isn't compatible with credentialed requests. Because you don't seem to need requests with credentials, you should be able to safely drop the following line from your CORS config anyway:
{ "key": "Access-Control-Allow-Credentials", "value": "true" },
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论