javascript - 无法向Riot API发送Ajax请求(Trouble sending an ajax request to Riot API)

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);
     });

I am getting constant errors connecting to this API and getting a response other than:

(我在连接到此API时不断出错，并且得到以下响应：)

jquery.min.js:4 Refused to set unsafe header "Origin" send @ jquery.min.js:4 ajax @ jquery.min.js:4 (anonymous) @ Riot dDragon access sample2.html:26 jquery.min.js:4 Refused to set unsafe header "Accept-Charset" send @ jquery.min.js:4 ajax @ jquery.min.js:4 (anonymous) @ Riot dDragon access sample2.html:26 jquery.min.js:4 Refused to set unsafe header "User-Agent" send @ jquery.min.js:4 ajax @ jquery.min.js:4 (anonymous) @ Riot dDragon access sample2.html:26 2jquery.min.js:4 OPTIONS https://na1.api.riotgames.com/lol/summoner/v4/summoners/by- name/TraversTT?api_key=RGAPI-1ed86c58-2eee-4e6c-85d4-3bead97e4d3b 405 (Method Not Allowed) send @ jquery.min.js:4 ajax @ jquery.min.js:4 (anonymous) @ Riot dDragon access sample2.html:26 Riot dDragon access sample2.html:1 Access to XMLHttpRequest at ' https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/TraversTT ?

(jquery.min.js：4拒绝设置不安全的标头“来源” send @ 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-name/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通过' https://na1.api.riotgames.com/lol/summoner访问XMLHttpRequest / v4 / summoners /按名称/ TraversTT ？)

api_key=RGAPI-1ed86c58-2eee-4e6c-85d4-3bead97e4d3b' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.`

(api_key = RGAPI-1ed86c58-2eee-4e6c-85d4-3bead97e4d3b'已被CORS策略阻止：对预检请求的响应未通过访问控制检查：没有“ Access-Control-Allow-Origin”标头存在于请求的资源上。)

I've been playing with different ways of doing this today for like 6 hours so any help available would be amazing.

(今天，我一直在用不同的方式进行此操作，大约6个小时，因此任何可用的帮助都将是惊人的。)

  ask by TraversTT translate from so

Answer 1

According to the api docs, your code should be something like this:

(根据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>

There are different types of HTTP requests;

(HTTP请求有不同的类型。)

GET, POST, PUT, etc... You were using POST but that endpoint only supports GET and you were setting some headers that are typically response headers.

(GET，POST，PUT等...您正在使用POST但是该端点仅支持GET并且您正在设置一些标头，通常是响应标头。)

Unfortunately there is a CORS issue on this endpoint, so your browser will not be able to access it via your browser.

(不幸的是，此端点上存在CORS问题，因此您的浏览器将无法通过浏览器访问它。)

You can try this cUrl in your terminal to see the response (copy and paste this into your terminal):

(您可以在终端中尝试此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

Note

(注意)

I will suggest never to post your API key ( 'X-Riot-Token': "RGAPI-1ed86c58-2eee-4e6c-85d4-3bead97e4d3b" ) on a public forum.

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