Cors 策略阻止 JSON 请求答案

【问题标题】：Cors policy blocking JSON requestCors 策略阻止 JSON 请求
【发布时间】：2021-02-28 00:43:36
【问题描述】：

基本上，我的问题是，当我尝试运行调用 API 的函数时，我遇到了 CORS 策略问题。我发现它似乎存在于某些端点上，但不存在于其他端点上。我知道这不是我的代码中的问题，我只是觉得我错过了一些东西。我一直在寻找答案，但这些通常包括来自其他语言的 API 请求，并且解决方案无法在 my 场景中应用。这是我的代码：运行此代码时，我收到一个关于 CORS 策略问题的错误。我需要在我的 API 请求中添加我缺少的任何其他标头吗？我无法理解文档，所以我在这里寻求帮助。谢谢！

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
    
    <title>Document</title>
    <style>
      body {
        background-color: #313131;
      }
    </style>
  </head>
  <body>
    <form class="form-inline" id="form" onsubmit="return false; ">
      <!--User inputs username in form-->
      <input
        class="form-control mr-sm-2"
        type="text"
        id="myText"
        placeholder="Enter a Username"
        class="searchTerm"
        aria-label="Search"
      />
      <!--Submit form button + SVG search I-->
      <button
        type="submit"
        class="btn btn-outline-success my-2 my-sm-0"
        onclick="myFunction()"
        class="searchButton"
      >
        <!--SVG search incon-->
        <svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
          <path
            fill="currentColor"
            d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
          />
        </svg>
      </button>
    </form>
    <script>
      function myFunction() {
        var username = document.getElementById('myText').value;
        var url =
          'http://api.quran.com/api/v3/search?q=' +
          username +
          '&size=20&page=0&language=ar';
        $.getJSON({
          url: url,
          success: function (data) {
            console.log(data);
          },
        });
      }
    </script>
  </body>
</html>

任何可以帮助我访问数据的解决方案都将不胜感激。

【问题讨论】：

您能否分享您收到的确切错误？我们需要它为您指明正确的方向。
抱歉回复晚了：
从源“null”访问“api.quran.com/api/v3/…”处的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

标签： json api cors

【解决方案1】：

查看文档，您可能需要在请求中指定一些额外的选项。试试这个。

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "http://api.quran.com/api/v3/search?q=" + username + "&size=20&page=0&language=ar",
  "method": "GET",
  "headers": {},
  "data": "{}"
}

$.ajax(settings).done(function (response) {
  console.log(response);

【讨论】：