Web Design Leaves

fetch('api/apikeys.php')
  .then(res => res.json())
  .then(({ apiKey }) => {
    return fetch('https://example.com/api/posts', {
      headers: {
        'X-API-Key': apiKey
      }
    });
  });

<?php
header('Content-Type: application/json');
echo json_encode([
  'apiKey' => 'abc123def456'
]);

<?php
// API キーを定数として定義（実際には複雑な値を指定します）
define('API_KEY', 'abc123def456');

Order deny,allow
Deny from all

<RequireAll>
  Require all denied
</RequireAll>

<?php
// API 設定ファイルの読み込みパス
$config_path = __DIR__ . '/config/api-config.php';

// 設定ファイルの存在チェック
if (!file_exists($config_path)) {
  http_response_code(500);
  header('Content-Type: application/json');
  echo json_encode(['error' => 'API 設定ファイルが見つかりません']);
  exit;
}

// 設定ファイルの読み込み
require_once $config_path;

// API_KEY 定義チェック
if (!defined('API_KEY')) {
  http_response_code(500);
  header('Content-Type: application/json');
  echo json_encode(['error' => 'API キーが定義されていません']);
  exit;
}

// クライアントからのリクエストで許可する「エンドポイント名」と、対応する送信先 URL を定義
// ここに登録されていない名前は受け付けない（ホワイトリスト方式で安全性を確保）
$endpoints = [
  'posts' => 'https://example.com/wp-json/my-theme-api/v1/posts',
];

// クエリパラメータから 'endpoint' を取得（存在しない場合は空文字に）
$endpointKey = $_GET['endpoint'] ?? '';

// 指定されたエンドポイント名が $endpoints に存在しなければ、無効として 400 Bad Request を返す
if (!isset($endpoints[$endpointKey])) {
  http_response_code(400);
  echo json_encode(['error' => '無効なエンドポイント']);
  exit;
}

// 有効なエンドポイント名の場合、対応する送信先 URL を取得
$baseUrl = $endpoints[$endpointKey];

// 他のクエリパラメータ（_fields, per_page など）を抽出して追加
$queryParams = $_GET;
unset($queryParams['endpoint']); // endpoint キーは除外

// API リクエストに指定する URL
$url = $baseUrl . '?' . http_build_query($queryParams);

// cURL を使用して外部 API にリクエストを送信
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); // レスポンスを文字列として取得
curl_setopt($ch, CURLOPT_TIMEOUT, 10); // タイムアウト設定（秒）
curl_setopt($ch, CURLOPT_HTTPHEADER, [
  'X-API-Key: ' . API_KEY,              // API キーをカスタムヘッダーに含める
  'Content-Type: application/json',
]);

$response = curl_exec($ch);                        // 実行
$curlError = curl_error($ch);                      // cURL エラー内容（失敗時）
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE); // HTTPステータスコード取得
curl_close($ch);                                   // cURLセッションを終了

// JSON としてレスポンスを返す
header('Content-Type: application/json');

// エラーハンドリングとレスポンス出力
if ($response === false) {
  // 通信自体が失敗した場合（ネットワークエラー等）
  http_response_code(500);
  echo json_encode(["error" => "cURL エラー: $curlError"]);
} else {
  // ステータスコード（$httpCode）をチェック
  if ($httpCode < 200 || $httpCode >= 400) {
    // HTTP レベルでエラーとみなすステータスコードの場合
    http_response_code($httpCode);
    echo json_encode(["error" => "HTTP エラーまたは予期しないステータス: $httpCode"]);
  } else {
    // 成功
    http_response_code($httpCode);
    // API からの生レスポンス（JSON 形式）をそのまま返す（必要に応じて整形可能）
    echo $response;
  }
}

// クエリパラメータを構築（url は渡さない）
const params = new URLSearchParams({
  endpoint: "posts", // 中継ファイルで検証に使うエンドポイント名（必須）→ posts を指定
  _fields: "title,link", // WordPress REST API 特有のパラメータ（必要なフィールドのみ取得）
  per_page: 5, // WordPress REST API 特有のパラメータ（1ページあたりの投稿数）
}).toString();

// PHP 中継ファイルに上記で設定したパラメータ（params）を渡す（ fetch() に指定する URL）
const proxyUrl = `api/fetch-posts.php?${params}`;

// fetch() で中継ファイルにリクエストを送信
fetch(proxyUrl, {
  method: "GET",
})
  .then(async (response) => {
    // レスポンスヘッダーから Content-Type を取得
    const contentType = response.headers.get("Content-Type") || "";
    let errorData = null;
    // レスポンスが失敗している（ステータスコードが 200 番台以外）
    if (!response.ok) {
      if (contentType.includes("application/json")) {
        errorData = await response.json(); // JSON形式のエラーデータを取得
      } else {
        const text = await response.text(); // テキスト形式の場合
        errorData = { error: text };
      }
      // エラー内容を例外として投げる（catch で受ける）
      throw new Error(errorData.error || `HTTPエラー: ${response.status}`);
    }
    // 成功時は JSON データをパースして返す
    return response.json();
  })
  .then((posts) => {
    // 投稿データをコンソールに出力（実際の処理に応じて変更可能）
    console.log(posts);
  })
  .catch((error) => {
    console.warn("投稿の取得エラー:", error);
  });

// WordPress REST API カスタムエンドポイントの URL（取得対象のエンドポイント）
const url = "https://example.com/wp-json/my-theme-api/v1/posts";

// API に渡すパラメータ（取得する投稿数とフィールド）
const params = {
  _fields: "title,link", // タイトルとリンクのみ取得（レスポンス軽量化）
  per_page: 5, // 取得件数：5件
};

// 中継 PHP（api/fetch-posts.php）へ POST メソッドでリクエストを送信
fetch("api/fetch-posts.php", {
  method: "POST", // フロントエンド → 中継PHP は POST に限定
  headers: {
    "Content-Type": "application/json", // 送信データは JSON 形式
  },
  body: JSON.stringify({
    url: url, // 中継先（取得対象）の WordPress API URL
    method: "GET", // 取得対象 API への HTTP メソッド（GET / POSTなど）
    params: params, // 取得対象 API に渡すパラメータ
  }),
})
  .then(async (response) => {
    // レスポンスヘッダーから Content-Type を取得（大文字小文字に依存しないように小文字に変換）
    const contentType = (response.headers.get("Content-Type") || "").toLowerCase();
    let errorData = null;
    // レスポンスが失敗している（ステータスコードが 200 番台以外）
    if (!response.ok) {
      if (contentType.includes("application/json")) {
        errorData = await response.json();
      } else {
        // テキスト形式（HTML など）のエラーの場合はステータスコードのみを返す
        errorData = { error: `HTTP エラー: ${response.status}` };
      }
      // エラー内容を例外として投げる（catch で受ける）
      throw new Error(errorData.error);
    }
    // 成功時は JSON データをパースして返す
    return response.json();
  })
  .then((posts) => {
    // 投稿データをコンソールに出力（ここでUIに表示するなどが可能）
    console.log(posts);
  })
  .catch((error) => {
    // 通信エラーや API 側のエラーをコンソールに出力
    console.warn("投稿の取得エラー:", error);
  });

<?php
define('OPENWEATHER_API_KEY', '123456789abcdefghijklmn');

Order deny,allow
Deny from all

<RequireAll>
  Require all denied
</RequireAll>

<?php
// API 設定ファイルの読み込みパス
$config_path = __DIR__ . '/config/api-config.php';

// 設定ファイルの存在チェック
if (!file_exists($config_path)) {
  http_response_code(500);
  header('Content-Type: application/json');
  echo json_encode(['error' => 'API 設定ファイルが見つかりません']);
  exit;
}

// 設定ファイルの読み込み
require_once $config_path;

// API_KEY 定義チェック
if (!defined('API_KEY')) {
  http_response_code(500);
  header('Content-Type: application/json');
  echo json_encode(['error' => 'API キーが定義されていません']);
  exit;
}

// JSON を返すヘッダーを設定
header('Content-Type: application/json');

// 許可する送信元（環境に合わせて変更します）
$allowedOrigins = [
  'https://example.com',
  'http://example.localhost:5501',
];

// リクエスト元のオリジンを取得
$origin = $_SERVER['HTTP_ORIGIN'] ?? '';

// 許可された送信元かを確認し、CORS用ヘッダーを動的に設定
if (in_array($origin, $allowedOrigins, true)) {
  // 安全なオリジンにだけヘッダーを返す
  header('Access-Control-Allow-Origin: ' . $origin);
} else {
  // 不正なオリジンからのアクセスは拒否
  http_response_code(403);
  echo json_encode(['error' => '許可されていない送信元です']);
  exit;
}

// メソッドが POST であることを確認
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
  http_response_code(405); // Method Not Allowed
  echo json_encode(['error' => 'POSTメソッドを使用してください']);
  exit;
}

// JSON 形式の POST リクエストボディを取得し、連想配列としてデコード
$input = json_decode(file_get_contents('php://input'), true);

// JSONエラーが発生、または配列でない場合
if (json_last_error() !== JSON_ERROR_NONE || !is_array($input)) {
  http_response_code(400);
  echo json_encode(['error' => '無効なJSONです: ' . json_last_error_msg()]);
  exit;
}

// リクエストパラメータを取得
$url = $input['url'] ?? '';
$params = $input['params'] ?? null;

// URLが未指定の場合はエラー
if (empty($url)) {
  http_response_code(400);
  echo json_encode(['error' => 'URLが指定されていません']);
  exit;
}

// URLのホワイトリストチェック
$parsedUrl = parse_url($url);

// スキームを検証（https のみを許可）
if (!in_array($parsedUrl['scheme'] ?? '', ['https'], true)) {
  http_response_code(403);
  echo json_encode(['error' => '無効なURLスキームです']);
  exit;
}

// 許可する送信先ホスト
$allowedHosts = ['api.openweathermap.org'];

// ホストの検証
if (!in_array($parsedUrl['host'] ?? '', $allowedHosts, true)) {
  http_response_code(403);  // Forbidden
  echo json_encode(['error' => '許可されていないURLです']);
  exit;
}

// 必須のパラメータ（q）
$city = $params['q'] ?? null;
if (empty($city)) {
  http_response_code(400);
  echo json_encode(['error' => '都市名（q パラメータ）は必須です']);
  exit;
}

// API キーをパラメータに追加
$params['APPID'] = OPENWEATHER_API_KEY;
// パラメータをクエリ文字列（URL エンコード形式）に変換
$queryString = http_build_query($params);
// URL を作成
$url .= (strpos($url, '?') === false ? '?' : '&') . $queryString;

// cURL 初期化とオプション
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET'); // HTTPメソッドを指定

// リクエストを実行し、レスポンスとHTTPステータスを取得
$response = curl_exec($ch);
$curlError = curl_error($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);

// エラーハンドリングとレスポンス出力
if ($response === false) {
  // 通信自体が失敗した場合（ネットワークエラー等）
  http_response_code(500);
  echo json_encode(["error" => "cURL エラー: $curlError"]);
} else {
  // ステータスコード（$httpCode）をチェック
  if ($httpCode < 200 || $httpCode >= 400) {
    // HTTP レベルでエラーとみなすステータスコードの場合
    http_response_code($httpCode);
    echo json_encode(["error" => "HTTP エラーまたは予期しないステータス: $httpCode"]);
  } else {
    // 成功
    http_response_code($httpCode);
    // API からの生レスポンスをそのまま返す（必要に応じて整形可能）
    echo $response;
  }
}

  // OpenWeather ベース URL
const openWeatherUrl = "https://api.openweathermap.org/data/2.5/weather";

const openWeatherParams = {
  q: "New York",  // 場所
  units: "metric",
  lang: "ja",
  //mode: 'html'
};

fetch("api/weather-proxy.php", {
  method: "POST", // フロントエンド → 中継 PHP は POST に限定
  headers: {
    "Content-Type": "application/json", // 送信データは JSON 形式
  },
  body: JSON.stringify({
    url: openWeatherUrl, // OpenWeather API URL
    params: openWeatherParams, // OpenWeather API に渡すパラメータ
  }),
})
  .then(async (response) => {
    const contentType = (response.headers.get("Content-Type") || "").toLowerCase();
    if (!response.ok) {
      let errorData = null;
      if (contentType.includes("application/json")) {
        errorData = await response.json();
      } else {
        // テキスト形式（HTML など）のエラーの場合はステータスコードのみを返す
        errorData = { error: `HTTP エラー: ${response.status}` };
      }
      throw new Error(errorData.error);
    }
    if (openWeatherParams.mode === "html") {
      // mode: 'html' を指定している場合（戻り値は HTML）
      return response.text();
    }
    return response.json();
  })
  .then((data) => {
    if (openWeatherParams.mode === "html") {
      console.log("天気情報の HTML: \n",data);
    } else {
      console.log("現在の天気:", data.weather[0].description);
      console.log("気温:", data.main.temp + "℃");
    }
  })
  .catch((error) => {
    console.error("天気の取得エラー:", error.message);
  });