对 CORS 服务器的 Axios DELETE 调用在预检 OPTIONS 调用上触发承诺解析

Posted 2023-02-27

【中文标题】对 CORS 服务器的 Axios DELETE 调用在预检 OPTIONS 调用上触发承诺解析

【英文标题】：Axios DELETE call to CORS server triggers promise resolve on preflight OPTIONS call

【发布时间】：2020-03-22 02:33:38

【问题描述】：

我有一个带有 CORS 设置的 API，以允许来自特定来源的任何方法和标头。使用 axios，我正在尝试对服务器进行并发 DELETE 调用，然后在完成所有删除调用后重新加载所有数据，例如

//module ajax;
const deleteAsset = function(id) 
    return axios.delete('/api/Asset/' + id);
;

const getAllAssets = function() 
    return axios.get('/api/Asset/');
;


//module data
...
Promise.all(ids.map(id =>  ajax.deleteAsset(id); ))
    .then(() =>  ajax.getAllAssets(); );

我发现的问题是，由于预检 OPTIONS 请求，承诺在 OPTIONS 请求返回后解决，而不是等待 DELETE 请求（因此在服务器上发生删除之前重新加载数据）。

有什么方法可以防止这种情况发生，并且只解决 DELETE 请求上的承诺？

【参考方案1】：

您对 OPTIONS 的解释不正确。不同步是因为你的代码。

你应该 => ajax.deleteAsset(id) 或 => return ajax.deleteAsset(id) 。在您的情况下，您没有返回对 map 的承诺，因此您无法同步您的承诺。

您可以在下面console.log dfds 来验证它确实是一个包含Promise（而不是undefined）的数组

下面的代码应该允许您同步删除和“检索”

const dfds = ids.map(id => ajax.deleteAsset(id))
return Promise.all(dfds).then(_ => ajax.getAllAssets())

（与返回的替代）

const dfds = ids.map(id =>  return ajax.deleteAsset(id) )
return Promise.all(dfds).then(_ =>  return ajax.getAllAssets() )

【讨论】：

哦，杂种。壮观的失败就我而言。如果您不小心，会在箭头语法中显示一个陷阱...