使用 AJAX 从另一个网站获取数据答案

【问题标题】：Fetching data from another website using AJAX使用 AJAX 从另一个网站获取数据
【发布时间】：2019-04-22 12:39:57
【问题描述】：

我有一个包含两个下拉菜单“诊所”和“服务”的表单。现在“服务”下拉菜单将根据“诊所”下拉菜单的变化而更新。

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

我已经使用 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

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

【问题讨论】：

@Shivam.... 未解决... add 'header('Access-Control-Allow-Origin: *');'在文件顶部

标签： javascript php jquery ajax curl

【解决方案1】：

我刚刚在这里回答了一个类似的问题。它假定您使用的是 Apache Web 服务器。 Using Fetch in react, need username password to access database

基本上，您的问题表明您的服务器需要配置为处理跨源资源共享 (CORS)。

如果您的 Web 服务器是 Apache，您可以通过以下方式实现此目的>

Header set Access-Control-Allow-Origin "*"

您可能需要重新启动服务器才能使更改生效。在 Linux 机器上，这通常通过以下命令实现。

sudo service apache2 restart

或

sudo service httpd restart

【讨论】：

@charlietfl 确实，如果 raff 无法访问服务器，他将无法将其配置为允许跨源请求。不过我不确定是不是这样。

【解决方案2】：

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

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

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

不过，在大多数情况下，您会希望使用自己的脚本简单地处理服务器端的事情，因为这提供了更高的稳定性、灵活性，甚至是验证和清理 API 输出的任何内容的便捷方式。

【讨论】：