如何使用axios批量请求URL数组，解决CORS报错及axios.all调用问题

正确的axios批量请求写法 #

const url = 'https://vimeo.com/api/oembed.json?url='

async index(videoUrls = []) {
  try {
    // 直接使用原生Promise.all管理批量请求，和fetch的用法逻辑完全一致
    const responseList = await Promise.all(
      videoUrls.map(videoUrl => 
        axios.get(`${url}${encodeURIComponent(videoUrl)}`, {
          // 移除默认的自定义请求头，避免触发CORS预检
          headers: {
            'X-Requested-With': null
          }
        })
      )
    )
    // 原生axios的响应内容默认存放在data字段中，直接提取即可，无需手动转JSON
    const results = responseList.map(res => res.data)
    return results
  } catch (e) {
    console.error(e)
  }
}

问题说明 #

1. 为什么你写的axios.all不存在
   当前新版本的axios已经移除了axios.all这个API，官方明确推荐直接使用原生Promise.all实现批量请求管理，用法和你之前写fetch的逻辑完全对齐。另外你之前的错误写法中，map返回的是拼接好的URL字符串，不是请求Promise实例，本身也无法执行请求。

2. 为什么fetch正常axios报CORS错误
   axios默认会给请求自动添加X-Requested-With: XMLHttpRequest自定义请求头，这类非标准头会触发浏览器的CORS预检请求，而Vimeo的公开oembed接口没有允许这个请求头，因此跨域失败。fetch默认不会添加这类自定义头，不会触发预检，所以请求可以正常返回。

如果使用的是框架封装的axios实例（比如Nuxt的@nuxtjs/axios），提供了$get方法直接返回响应数据的话，把上述代码中的axios.get替换为axios.$get，后续就不需要再额外提取res.data字段。

内容的提问来源于stack exchange，提问作者learningtech