javascript - 使用AJAX从另一个网站获取数据

我有一个带有两个下拉菜单“诊所”和“服务”的表格。现在，“服务”下拉列表将根据“诊所”下拉列表的更改进行更新。

现在，“服务”和“诊所”的数据存储在另一个网站数据库中。

我已经使用cURL提取了“诊所”数据。但是由于我必须在运行时中更新“服务”下拉列表，因此我尝试使用AJAX来获取“服务”数据。

的HTML

<form method="post">
  <div class="chosen-select-single mg-b-20">
    <label><b>Select Clinic : </b></label>
    <select data-placeholder="Choose a Clinic..." class="chosen-select" tabindex="-1" name="clinic" id="clinic_id">
      <option value="">Select One</option>
      <?php foreach($clinic_datum as $data) { ?>
        <option value="<?php echo $data->id;?>"><?php echo $data->name?></option>
      <?php } ?>
    </select>
    <?php if($clinicErr != "") { ?>
      <span class="error">* <?php echo $clinicErr;?></span>
    <?php } ?>
  </div>
</form>

AJAX

jQuery("#clinic_id").change(function() {
  var clinic_id = $('#clinic_id').val();
  if(clinic_id.trim() != '') {
    jQuery.ajax({
      url: "http://www.sencare.com.bd/service_data_curl",
      type: 'GET',
      dataType: 'jsonp',
      data: {clinic_id : clinic_id},
      success: function(msg) {
        console.log('msg');
      }
    });
  }
});

但是我得到这个错误


  跨域读取阻止（CORB）阻止了MIME类型为text / html的跨域响应http://www.sencare.com.bd/service_data_curl?callback=jQuery1113005791399070777792_1542690562198&clinic_id=2&_=1542690562199。有关更多详细信息，请参见https://www.chromestatus.com/feature/5629709824032768


如何解决这个问题……有人帮忙吗？

最佳答案

当您从第三方API动态加载数据时，应将ajax请求的目标url更改为您自己域上的脚本，并像最初那样通过curl获取数据。然后将其退回并正常处理。您可能不需要jsonp-只是常规json应该可以正常工作。

从理论上讲，如果您有权将CORS标头添加到sencare.com，则可以通过在Apache配置文件中执行以下操作来允许ajax请求：

Access-Control-Allow-Origin: https://{your-website-url}

不过，在大多数情况下，您只需要使用自己的脚本来处理服务器端的事务，因为这将提供更高的稳定性，灵活性，甚至是一种方便的方法来验证和清除API吐出的任何内容。