访问 vercel 无服务器 api 时出现 Cors 问题

Question

我知道这个问题已经被问过很多次并得到了回答。但这些解决方案都不适合我。也许我错过了一些简单的东西:(

我有一个可重现的示例这里

我有

• api

  目录中的无服务器函数 -> 

  api/serverless-example/handler

  ，使用 vercel 

  example创建。
• web

   由 

  create-react-app 创建的前端目录

在前端，点击

Learn react

 按钮会触发对 

serverless-example/handler

 的 fetch api 调用，这会引发 cors 错误。正如 

vercel 团队和许多 SO 帖子所建议的那样，我尝试了 vercel.json

 和 

allowCors

 方法。

现在，它抛出以下错误

Access to fetch at 'http://localhost:5005/api/serverless-example/handler' from origin 'http://localhost:3001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

。

经过多次尝试，我无法克服这个错误。任何帮助将不胜感激

Answer 1

对于我的场景（开发环境中的 axios + POST + json over http），根本原因是

'Content-Type':'application/json'

 不支持 POST CORS。 

请参阅
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

解决方案是

JSON.stringify()

 请求带有标头的负载 

'Content-Type': 'text/plain'