我在执行以下任一操作时都无法正确处理 CORS 问题PATCH/POST/PUT来自浏览器的请求发送Authorization标题带有一个Bearer token（这在浏览器之外可以正常工作，并且适用于GET请求）中Zeit 现在无服务器 https://zeit.co/docs/v2/serverless-functions/introduction.

我在用着Auth0 https://auth0.com/对于授权方（如果有帮助的话）。

这是我的now.jsonheaders 部分，我尝试了很多组合，但浏览器都没有成功。

1. 我尝试使用 npmcors打包没有成功
2. 尝试添加routes in now.json
3. 尝试使用以下命令在无服务器功能的顶部设置标头res.addHeader()
4. 也尝试过处理OPTIONS请求手动执行此操作的变体：

最后，这是我得到的错误

Access to XMLHttpRequest at 'https://api.example.org/api/users' from origin 'https://example.org' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

不确定我错了什么或如何正确处理这个问题。

我对 CORS 和 Vercel 无服务器功能有非常类似的问题。

经过很多尝试→失败过程我刚刚找到了解决方案。

解决方案

tldr

最简单的解决方案，只需使用微科尔斯 https://github.com/possibilities/micro-cors.

并有一个类似的实现；

import { NowRequest, NowResponse } from '@now/node';
import microCors from 'micro-cors';

const cors = microCors();

const handler = (request: NowRequest, response: NowResponse): NowResponse => {
  if (request.method === 'OPTIONS') {
    return response.status(200).send('ok');
  }

  // handle incoming request as usual
};

export default cors(handler);

更长的版本，但没有任何新的依赖项

using vercel.json处理请求标头

vercel.json

{
  "headers": [
    {
      "source": "/.*",
      "headers": [
        {
          "key": "Access-Control-Allow-Origin",
          "value": "*"
        },
        {
          "key": "Access-Control-Allow-Headers",
          "value": "X-Requested-With, Access-Control-Allow-Origin, X-HTTP-Method-Override, Content-Type, Authorization, Accept"
        },
        {
          "key": "Access-Control-Allow-Credentials",
          "value": "true"
        }
      ]
    }
  ]
}

自行尝试后，有2个关键重要在上述设置中，

1. 您必须设置Access-Control-Allow-Origin如你所愿
2. In Access-Control-Allow-Headers you 必须包括 Access-Control-Allow-Origin成其价值。

那么在无服务器功能中，您仍然需要处理飞行前请求 https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request as well

/api/index.ts

const handler = (request: NowRequest, response: NowResponse): NowResponse => {
  if (request.method === 'OPTIONS') {
    return response.status(200).send('ok');
  }

  // handle incoming request as usual
};

我建议阅读中的代码微科尔斯 https://github.com/possibilities/micro-cors，这是非常简单的代码，您可以在几分钟内理解它会做什么，这使我不关心将其添加到我的依赖项中。