带有来自api的自动完成的jquery ajax给出错误

Question

我正在尝试从免费 api 显示机场的自动建议（带有名称的 IATA 代码）起点和目的地。当我尝试使用 dataType json 得到错误“Cross-Origin Request Blocked”并且当我使用 dataType jsonp 得到错误“SyntaxError：意外令牌：'：'”时

$("#city").autocomplete({
        source: function(request, response) {
          $.ajax({
           type: "GET",
           dataType : 'jsonp',
          // cache: false,
          crossDomain:true,
          // async:false,
         contentType: "application/json; charset=utf-8",
            url: "https://iatacodes.org/api/v6/autocomplete",
    //headers: {  'Access-Control-Allow-Origin': '*' },
            /*headers: {
            'Access-Control-Allow-Origin': '*',
            'Content-Type':'application/json'
            },*/


            data: {
              api_key:"66e4db3f-e4fc-4554-b4c4-6f4d8b32ba2f",
              query: request.term
            },
            success: function(data) {alert(data);
              response(data);
            }
          });
        },
        minLength: 3,
        select: function(event, ui) {
          log(ui.item ?
            "Selected: " + ui.item.label :
            "Nothing selected, input was " + this.value);
        },
        open: function() {
          $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
        },
        close: function() {
          $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
        }
      });

Answer 1

为了允许来自其他域的 API 请求（跨域请求被阻止），您必须在您的 api 调用中设置 'Access-Control-Allow-Origin': '*'。