跨域访问 CI4 公共文件夹中的 KML 文件：解决 CORS 错误

2024-03-10 15:53:24

跨域访问 CI4 公共文件夹中的 KML 文件

跨源资源共享 (CORS) 是实现不同来源（域、端口或协议）之间 HTTP 请求的关键机制。当试图从 Nuxt.js 前端访问 CodeIgniter 4 (CI4) 公共文件夹中的 KML 文件时，可能会遇到 CORS 错误，因为服务器未设置适当的 CORS 头。

解决方案：设置 CI4 CORS 头

为了解决跨域限制，需要在 CI4 中设置 CORS 头，以允许来自 Nuxt.js 前端的请求访问公共文件夹中的 KML 文件：

修改 before 方法：

public function before(RequestInterface $request, $arguments = null)
{

    // 允许来自任何来源的请求
    header('Access-Control-Allow-Origin: *');

    // 允许特定的请求头
    header("Access-Control-Allow-Headers: Authorization, X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method");

    // 允许特定的请求方法
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");

    // 允许凭据（例如 cookie）
    header('Access-Control-Allow-Credentials: true');

    // 检查请求是否为 OPTIONS 预检请求
    $method = $_SERVER['REQUEST_METHOD'];
    if ($method == "OPTIONS") {
        die();
    };

}

其他注意事项

确保 Nuxt.js 前端配置了正确的 CORS 设置。
确保 KML 文件可被 Nuxt.js 前端访问（例如，将其放置在可公开访问的目录中）。
检查服务器日志以获取其他错误信息。

使用 Nuxt.js 前端访问 KML

以下示例演示了如何使用 Nuxt.js 前端访问 KML 文件：

// Nuxt.js 前端代码

async mounted() {
  try {
    const baseURL = "http://localhost:8080";
    const kmlFilePath = baseURL + "/public/uploads/transmitters/kmz/Untitled.kml";

    const kmlLayer = new google.maps.KmlLayer({
      url: kmlFilePath,
    });

    kmlLayer.setMap(this.map);
  } catch (error) {
    console.error("Error fetching or adding KML file:", error);
  }
}