向 Riot API 发送 ajax 请求时遇到问题

Question

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <title>Sample Page</title>
  <script>
      var summonername = "TraversTT"
      var api_key1= "******"
      var headers1 = {
          'Access-Control-Allow-Origin': '*',
          'Origin': "https://developer.riotgames.com",
          'Accept-Charset': "application/x-www-form-urlencoded; charset=UTF-8",
          'X-Riot-Token': "*****",
          'Accept-Language': "en-US,en;q=0.9",
          'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36',
      }
      var settings = {
       "async": true,
       "type": "POST",
       "url": "https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/"+summonername+"?api_key="+api_key1,
       "headers": headers1,
       "dataType": 'json',
       "data": 'dataTest',
     };
  $.ajax(settings).done(function (response) {
       console.log(response);
     });

我在连接到此 API 时经常遇到错误并得到以下响应：

jquery.min.js:4 拒绝设置不安全的标头“Origin” 发送@jquery.min.js:4 ajax@jquery.min.js:4 （匿名）@Riot dDragon 访问 sample2.html:26 jquery.min.js:4 拒绝设置不安全的标头“Accept-Charset” 发送@jquery.min.js:4 ajax@jquery.min.js:4 （匿名）@Riot dDragon 访问 sample2.html:26 jquery.min.js:4 拒绝设置不安全的标头“User-Agent” 发送@jquery.min.js:4 ajax@jquery.min.js:4 （匿名）@Riot dDragon 访问 sample2.html:26 2jquery.min.js:4 选项https://na1.api.riotgames.com/lol/summoner/v4/summoners/by- 名称/TraversTT?api_key=RGAPI-1ed86c58-2eee-4e6c-85d4-3bead97e4d3b 405（方法不 允许） 发送@jquery.min.js:4 ajax@jquery.min.js:4 （匿名）@Riot dDragon 访问 sample2.html:26 Riot dDragon 访问 sample2.html:1 访问 XMLHttpRequest at 'https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/TraversTT? api_key=RGAPI-1ed86c58-2eee-4e6c-85d4-3bead97e4d3b' 来自原点'null' 已被阻止 通过 CORS 策略：对预检请求的响应未通过访问控制检查：否 请求的资源上存在“Access-Control-Allow-Origin”标头。`

我今天已经用不同的方法来做这件事了大约 6 个小时，所以任何可用的帮助都会很棒。

Answer 1

根据 api 文档，您的代码应该是这样的：

<script>
  var summonername = "TraversTT";
  var api_key1= "RGAPI-1ed86c58-2eee-4e6c-85d4-3bead97e4d3b";
  var headers1 = {
    'X-Riot-Token': "RGAPI-1ed86c58-2eee-4e6c-85d4-3bead97e4d3b",
  }
  var settings = {
    "async": true,
    "type": "GET",
    "url": "https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/"+summonername+"?api_key="+api_key1,
    "headers": headers1,
  };
  $.ajax(settings).done(function (response) {
    console.log(response);
  });
</script>

有不同类型的 HTTP 请求； GET、POST、PUT 等...您使用的是 POST，但该端点仅支持 GET，并且您正在设置一些通常是响应标头的标头。

很遗憾，此端点上存在CORS 问题，因此您的浏览器将无法通过您的浏览器访问它。

您可以在终端中尝试此cUrl 以查看响应（将其复制并粘贴到您的终端中）：

curl 'https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/TraversTT?api_key=RGAPI-1ed86c58-2eee-4e6c-85d4-3bead97e4d3b' -X OPTIONS -H 'Access-Control-Request-Method: GET' -H 'Origin: https://js-9vpefs.stackblitz.io' -H 'Referer: https://js-9vpefs.stackblitz.io/' -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36' -H 'DNT: 1' -H 'Access-Control-Request-Headers: x-riot-token' --compressed

注意

我建议永远不要在公共论坛上发布您的 API 密钥 ('X-Riot-Token': "RGAPI-1ed86c58-2eee-4e6c-85d4-3bead97e4d3b")。