Vue中使用Axios调用英雄联盟API时遭遇CORS错误：Request header field content-encoding不在预响应Access-Control-Allow-Headers范围内

嘿，我来帮你拆解下这个问题的核心原因和修复方案，你现在遇到的CORS错误其实是因为几个关键的操作失误导致的，咱们一步步来理清楚：

问题核心错误分析 #

你当前的代码里存在几个明显的问题，直接引发了这个CORS预检错误：

1. 错误添加了服务器响应头到请求中
   你在请求头里加了一堆本应该是服务器返回给客户端的响应头，比如Access-Control-Allow-Origin、X-App-Rate-Limit、X-Riot-Edge-Trace-Id这些。前端请求根本不需要发送这些头，它们是Riot服务器用来告知客户端权限、限流信息的，你强行添加反而会触发浏览器的预检请求，而Riot的服务器并未允许这些自定义头，进而报错。

2. 错误使用了Content-Encoding请求头
   Content-Encoding是服务器响应时用来标识响应体编码格式的头（比如gzip），客户端应该用Accept-Encoding来告诉服务器自己支持的压缩格式。你在请求里发送Content-Encoding，而Riot的CORS规则里并没有允许这个头，这就是你看到的错误的直接原因。

3. API Key的URL参数格式错误
   你的请求URL里，API Key的拼接少了一个等于号：&api_key" + this.apiKey，正确的格式应该是&api_key=" + this.apiKey，这个错误会导致请求无法被Riot服务器正确识别，即使CORS问题解决了，请求也会失败。

修复方案 #

针对上面的问题，你只需要做这几个调整：

• 移除所有不属于前端请求的冗余头，只保留必要的（甚至GET请求连Content-Type都可以省略，因为GET没有请求体）
• 如果需要接受压缩响应，用Accept-Encoding: gzip替代错误的Content-Encoding，或者直接去掉，浏览器会自动处理
• 修正API Key的URL参数格式
• 完全移除所有Access-Control相关的请求头，这些是服务器的职责，前端不能设置

修改后的代码 #

getLast10Games() {
  axios
    .get(
      `https://europe.api.riotgames.com/lol/match/v5/matches/by-puuid/${this.puuid}?start=0&count=10&api_key=${this.apiKey}`,
      {
        headers: {
          // 可选：如果你需要接受gzip压缩响应，添加这个头，否则可以去掉
          "Accept-Encoding": "gzip"
          // 其他冗余头全部移除，GET请求不需要Content-Type
        },
      }
    )
    .then((response) => {
      console.log(response.data);
    })
    .catch((error) => {
      console.log(error);
    });
}

额外提醒：如果你的应用是纯前端部署（比如静态页面），要注意Riot API的CORS规则——部分接口可能不允许直接从浏览器调用，这种情况下你需要搭建一个后端代理服务器，通过后端转发请求来绕过CORS限制。不过从你说部分接口能正常运行来看，当前这个接口应该是允许前端直接调用的，修复上面的问题后应该就能正常工作了。

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