Chrome调用pokemontcg API出现CORS跨域及ERR_FAILED错误求助

问题原因 #

• AJAX配置语法错误：你在$.ajax的url参数中错误添加了GET前缀，method: "GET"已经完成了请求方法的声明，不需要重复写到请求地址里。这个错误导致浏览器将接口地址识别为本地相对路径，才会出现错误日志里file:///C:/Users/.../GET%20https://api.pokemontcg.io/xxx的异常请求路径。
• file协议跨域限制：你是直接双击打开本地HTML文件运行项目，此时浏览器用file://协议加载页面，CORS策略默认不支持file协议来源的跨域请求，因此直接拦截了你的接口调用。

解决步骤 #

1. 修正AJAX请求配置，删除url里的GET前缀，同时补全参数名和成功回调逻辑：

$(document).ready(function (e) {
  $("#TheSubmitButton").on("click", function(event){
    event.preventDefault();
    var Pokemon = $("#search").val().trim();
    console.log(Pokemon);

    $.ajax({
      // 修正url写法，去掉GET前缀，补全参数键名
      url: "https://api.pokemontcg.io/v2/cards?s=" + Pokemon,
      dataType: 'json',
      method: "GET",
      // 补充成功回调处理返回数据
      success: function(response) {
        for (var i = 0; i < response.cards.length; i++) {
          var pokemonCard = $("<img>");
          pokemonCard.attr("src", response.cards[i].imageUrlHiRes);
          $("#card-container").append(pokemonCard);
        }
      }
    });
  });
});

2. 改用HTTP协议打开页面，不要直接双击打开本地文件：
   • 若使用VS Code开发，安装Live Server插件后右键HTML文件，选择「Open with Live Server」即可启动本地HTTP服务访问页面
   • 若已安装Node.js，在项目根目录执行npx serve，随后访问http://localhost:3000即可正常加载页面

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