Orgchart.js调用接口报CORS跨域错误 PHP配置跨域头后未生效求解决

问题核心原因 #

你遇到的CORS错误本质是你前端请求的第三方API（https://uk-s-balkangraph.azurewebsites.net/api/OrgChartJS）没有配置允许你的站点域名跨域访问，你之前在自己站点的.htaccess和index.php里加CORS头完全没用，因为CORS头需要被请求的资源（也就是这个第三方API）返回才生效，你给自己的站点加头只能解决别人跨域调用你接口的问题，解决不了你调用别人接口的跨域问题。

可行解决方案 #

• 方案1：用PHP做代理中转请求（最适合你当前原生PHP无框架的场景）
  原理是服务端发起请求没有同源策略限制，你让前端先请求你自己站点的PHP接口，再由这个PHP接口转发请求到第三方API，拿到结果后返回给前端即可。
  操作步骤：

  1. 在你的站点根目录新建orgchart_proxy.php文件，代码如下：

  <?php
  // 允许前端访问本代理接口
  header("Access-Control-Allow-Origin: *");
  header("Content-Type: application/json");
  
  // 第三方OrgChart API地址
  $target_api = "https://uk-s-balkangraph.azurewebsites.net/api/OrgChartJS";
  
  // 获取前端请求的参数和请求方式
  $request_method = $_SERVER['REQUEST_METHOD'];
  $request_body = file_get_contents('php://input');
  $request_headers = getallheaders();
  
  // 初始化curl转发请求
  $ch = curl_init($target_api);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  curl_setopt($ch, CURLOPT_CUSTOMREQUEST, $request_method);
  if (!empty($request_body)) {
      curl_setopt($ch, CURLOPT_POSTFIELDS, $request_body);
  }
  // 透传请求头
  $headers = [];
  foreach ($request_headers as $key => $value) {
      if (strtolower($key) != 'host') {
          $headers[] = "$key: $value";
      }
  }
  curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
  
  // 执行请求返回结果
  $response = curl_exec($ch);
  $http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
  curl_close($ch);
  
  // 透传响应状态码和响应内容
  http_response_code($http_code);
  echo $response;
  ?>
  

  2. 修改你前端orgchart.js的配置，把原来请求第三方API的地址改成你这个代理文件的地址，比如/orgchart_proxy.php即可。
     注意：如果请求时报错，先检查你的PHP是否开启了curl扩展，在php.ini中找到extension=curl去掉前面的分号后重启服务即可。

• 方案2：使用离线版OrgChart.js
  如果你不需要用到Balkan Graph的云端服务，可以下载官方离线版的OrgChart.js SDK放到你的站点目录本地引入，所有渲染逻辑都在本地执行，不需要调用第三方API，自然不会有跨域问题。

• 方案3：在第三方平台配置域名白名单
  如果你是Balkan Graph的付费用户，可以登录他们的管理后台，将你的站点域名https://xxxxxx.com添加到CORS访问白名单中，配置完成后他们的API就会返回允许你站点访问的CORS头，跨域问题直接解决。

内容的提问来源于stack exchange，提问作者Vahid Golestani