Cors TypeScript 中没有重载匹配此调用

Posted 2023-02-22

【中文标题】Cors TypeScript 中没有重载匹配此调用

【英文标题】：No overload matches this call in Cors TypeScript

【发布时间】：2020-03-28 17:43:44

【问题描述】：

我想使用 Express TypeScript 创建 API，但是当我想使用 cors 时，它显示如下错误：

No overload matches this call.
The last overload gave the following error.
Argument of type 'RequestHandler<any>' is not assignable to parameter of type 'PathParams'.
Type 'RequestHandler<any>' is missing the following properties from type '(string | RegExp)[]': length, pop, push, concat, and 26 more.

我使用yarn add cors express 和yarn add @types/cors @types/express 安装了这个包

这是我的代码：

const api = express();
const main = express();

api.use(cors( origin: true ));

main.use(bodyParser.json());
main.use(bodyParser.urlencoded( extended: false ));
main.use("/api/v1", api);

export const webApi = functions.https.onRequest(main);

错误在app.use(cors( origin: true );

【参考方案1】：

我相信你用错误的方式称呼它。根据https://expressjs.com/en/resources/middleware/cors.html这里的官方文档，你“使用”它就像api.use(cors())

当你像这样“调用” cors 时，你会传入选项

api.get('/products/:id', cors(corsOptions), function (req, res, next)  
res.json(msg: 'This is CORS-enabled for only example.com.') 
)

所以你的情况会是这样的

api.get('/products/:id', cors( origin: true), function (req, res, next)  
    res.json(msg: 'This is CORS-enabled for only example.com.') 
    )

【讨论】：

你必须再看一遍OP。他要求使用 Typescript，而您正在使用 javascript。这是关于@types 的兼容性。

【参考方案2】：

Specifying the path is optional for use 和 cors docs 准确地展示了您作为有效示例所做的事情。 IOW，你的代码很棒！那里没有问题。

最近对 express 类型定义进行了更改。似乎有两组：@types/express 和 @types/express-serve-static-core。前者依赖于后者，而express-serve-static-core中的there seems to be some breaking changes@types/express还没有完全赶上。

在该线程中，提出了一些解决方法。

您可以将package.json 中的@types/express 版本固定为4.17.0 版本。或者您可以使用 Typescript compiler's skipLibCheck 标志禁用库检查。

【讨论】：

在我的情况下，我明确定义 app.options('', cors(config)) 以启用预检，因为我在每条路线上使用 CORS（如文档所示）我只是重铸了这句话如以下app.option('', cors(config) as RequestHandler)，其中RequestHandler是express的接口。

【参考方案3】：

对我有用的是之前声明了一个变量：

const corstOpts = cors( origin: true )
api.use(corstOpts);

【参考方案4】：

此解决方案有效。在定义 cors 之前添加一个变量，如下所示：

const corsOptions = 
  origin: '*',
  credentials: true
;

然后像这样使用变量：

app.use(cors(corsOptions))