Problemi di funzionamento di un’API REST

API Rest risoluzione Problemi
Abbiamo prodotto la nostra API Rest ma non funziona su di un sito diverso da quello di sviluppoSe l’Endpoint API Rest non funziona quando metti la pagina PHP (request.php) su un sito web che supporta PHP, potrebbe esserci un problema di CORS (Cross-Origin Resource Sharing), o la configurazione del server potrebbe non consentire le richieste tra domini diversi. Ecco una spiegazione più dettagliata e come risolvere il problema.

Problemi Potenziali e Soluzioni

  1. Problema CORS (Cross-Origin Resource Sharing):
    • Le richieste HTTP tra domini diversi (ad esempio, dal tuo sito web al server API locale) potrebbero essere bloccate dal browser per motivi di sicurezza.
    Soluzione:
    • Assicurati che il server API (api/index.php) consenta le richieste da altri domini aggiungendo gli header CORS appropriati.
    Modifica api/index.php per includere gli header CORS:
    php
    <?php require_once '../db.php';header(“Access-Control-Allow-Origin: *”); header(“Access-Control-Allow-Methods: POST, GET, OPTIONS”); header(“Access-Control-Allow-Headers: Content-Type, Authorization”); header(“Content-Type: application/json; charset=UTF-8”);$db = new Database(); $conn = $db->getConnection();$requestMethod = $_SERVER[“REQUEST_METHOD”];if ($requestMethod == ‘OPTIONS’) { // Pre-flight request per CORS http_response_code(200); exit(); }if ($requestMethod == ‘POST’) { $data = json_decode(file_get_contents(“php://input”), true); if (isset($data[‘param1’]) && isset($data[‘param2’]) && isset($data[‘param3’])) { $param1 = $data[‘param1’]; $param2 = $data[‘param2’]; $param3 = $data[‘param3’]; executeFunction($conn, $param1, $param2, $param3); } else { echo json_encode(array(“message” => “Incomplete data.”)); } } else { header(“HTTP/1.0 405 Method Not Allowed”); }function executeFunction($conn, $param1, $param2, $param3) { $query = “{CALL myFunction(:param1, :param2, :param3)}”; $stmt = $conn->prepare($query);$stmt->bindParam(‘:param1’, $param1); $stmt->bindParam(‘:param2’, $param2); $stmt->bindParam(‘:param3’, $param3);  try { $stmt->execute(); $result = $stmt->fetchAll(PDO::FETCH_ASSOC); echo json_encode($result); } catch (PDOException $e) { echo json_encode(array("message" => "Error: " . $e->getMessage())); } } ?>
  2. Configurazione del Server:
    • Verifica che il server web sia configurato correttamente per accettare e rispondere alle richieste da altri domini.
  3. URL Assoluto vs Relativo:
    • Assicurati di usare l’URL assoluto della tua API nella richiesta fetch. Ad esempio:
    javascript
    fetch('http://tuo-api-server/api_project/api/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }) .then(response => response.json()) .then(data => displayResults(data)) .catch(error => console.error('Error:', error));
  4. Configurazione del Firewall/Proxy:
    • Assicurati che non ci siano firewall o proxy che bloccano le richieste tra il sito web e il server API.

Aggiornamento del request.php

Ecco l’aggiornamento del file request.php per inviare una richiesta POST alla tua API e visualizzare i risultati in una tabella HTML. Assicurati di sostituire http://tuo-api-server/api_project/api/ con l’URL assoluto del tuo server API.

request.php

php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>API Request</title> </head> <body> <h1>API Request</h1> <form id="apiForm"> <label for="param1">Param1:</label> <input type="text" id="param1" name="param1"><br><br> <label for="param2">Param2:</label> <input type="text" id="param2" name="param2"><br><br> <label for="param3">Param3:</label> <input type="text" id="param3" name="param3"><br><br> <input type="button" value="Submit" onclick="sendRequest()"> </form> <h2>Results:</h2> <div id="results"></div><script> function sendRequest() { var param1 = document.getElementById(‘param1’).value; var param2 = document.getElementById(‘param2’).value; var param3 = document.getElementById(‘param3’).value;var data = { “param1”: param1, “param2”: param2, “param3”: param3 };fetch(‘http://tuo-api-server/api_project/api/’, { method: ‘POST’, headers: { ‘Content-Type’: ‘application/json’ }, body: JSON.stringify(data) }) .then(response => response.json()) .then(data => displayResults(data)) .catch(error => console.error(‘Error:’, error)); }  function displayResults(data) { if (data.message) { document.getElementById('results').innerHTML = '<p>' + data.message + '</p>'; } else { var table = '<table border="1"><tr>'; // Creare l'intestazione della tabella for (var key in data[0]) { table += '<th>' + key + '</th>'; } table += '</tr>'; // Popolare i dati della tabella data.forEach(function(row) { table += '<tr>'; for (var key in row) { table += '<td>' + row[key] + '</td>'; } table += '</tr>'; }); table += '</table>'; document.getElementById('results').innerHTML = table; } } </script> </body> </html>
Con queste modifiche, la tua pagina PHP dovrebbe essere in grado di inviare una richiesta POST con JSON alla tua API e visualizzare i risultati in una tabella HTML. Assicurati che l’API sia configurata per consentire le richieste CORS se stai effettuando richieste tra domini diversi.

Verifica della configurazione corretta del Server

  1. Aggiungere gli header CORS al tuo server API: Assicurati che il server API aggiunga gli header necessari per consentire le richieste CORS. Ecco un esempio di come farlo in PHP (api/index.php):
    php
    <?php require_once '../db.php';header(“Access-Control-Allow-Origin: *”); header(“Access-Control-Allow-Methods: POST, GET, OPTIONS”); header(“Access-Control-Allow-Headers: Content-Type, Authorization”); header(“Content-Type: application/json; charset=UTF-8”);$db = new Database(); $conn = $db->getConnection();$requestMethod = $_SERVER[“REQUEST_METHOD”];if ($requestMethod == ‘OPTIONS’) { // Pre-flight request per CORS http_response_code(200); exit(); }if ($requestMethod == ‘POST’) { $data = json_decode(file_get_contents(“php://input”), true); if (isset($data[‘param1’]) && isset($data[‘param2’]) && isset($data[‘param3’])) { $param1 = $data[‘param1’]; $param2 = $data[‘param2’]; $param3 = $data[‘param3’]; executeFunction($conn, $param1, $param2, $param3); } else { echo json_encode(array(“message” => “Incomplete data.”)); } } else { header(“HTTP/1.0 405 Method Not Allowed”); }function executeFunction($conn, $param1, $param2, $param3) { $query = “{CALL myFunction(:param1, :param2, :param3)}”; $stmt = $conn->prepare($query);$stmt->bindParam(‘:param1’, $param1); $stmt->bindParam(‘:param2’, $param2); $stmt->bindParam(‘:param3’, $param3); try { $stmt->execute(); $result = $stmt->fetchAll(PDO::FETCH_ASSOC); echo json_encode($result); } catch (PDOException $e) { echo json_encode(array("message" => "Error: " . $e->getMessage())); } } ?>
  2. Testare CORS con Strumenti di Sviluppo del Browser: Usa gli strumenti di sviluppo del browser (come la console di Chrome) per vedere se ci sono errori relativi a CORS. Fai clic con il tasto destro sulla pagina, seleziona “Ispeziona” e vai alla scheda “Console” o “Network”.
  3. Testare CORS con Curl: Usa curl dalla riga di comando per fare una richiesta e vedere la risposta del server. Ecco un esempio:
    curl -X OPTIONS http://tuo-api-server/api_project/api/ -i
    Dovresti vedere una risposta simile a questa se CORS è configurato correttamente:
    HTTP/1.1 200 OK Access-Control-Allow-Origin: * Access-Control-Allow-Methods: POST, GET, OPTIONS Access-Control-Allow-Headers: Content-Type, Authorization Content-Type: application/json; charset=UTF-8
  4. Testare con JavaScript: Crea un piccolo script HTML/JavaScript per testare la richiesta CORS:
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test CORS</title> </head> <body> <h1>Test CORS</h1> <button onclick="testCORS()">Test CORS</button> <pre id="output"></pre>  <script> function testCORS() { fetch('http://tuo-api-server/api_project/api/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ "param1": "value1", "param2": "value2", "param3": "value3" }) }) .then(response => response.json()) .then(data => { document.getElementById('output').textContent = JSON.stringify(data, null, 2); }) .catch(error => { document.getElementById('output').textContent = 'Error: ' + error; }); } </script> </body> </html>
    Apri questo file in un browser e clicca sul bottone “Test CORS” per vedere se la richiesta va a buon fine. Controlla la console del browser per eventuali errori relativi a CORS.
  5. Controlla le Impostazioni del Server: Se stai usando Apache, Nginx, o un altro server web, assicurati che sia configurato per consentire CORS. Ecco un esempio di configurazione per Apache:Modifica il file .htaccess o il file di configurazione del server Apache:
    <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" Header set Access-Control-Allow-Methods "GET, POST, OPTIONS" Header set Access-Control-Allow-Headers "Content-Type, Authorization" </IfModule>
    Per Nginx, aggiungi le seguenti direttive al tuo blocco di configurazione del server:
    nginx
    location / { if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization'; add_header 'Content-Length' 0; add_header 'Content-Type' 'text/plain'; return 204; } add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization'; }
  6. Riavvia il Server: Dopo aver fatto modifiche alla configurazione del server, assicurati di riavviare il server web per applicare le modifiche.

Verifica Finale

Dopo aver configurato gli header CORS correttamente, rifai i test usando il browser e/o curl per verificare che le richieste tra domini diversi siano ora consentite e che il server risponda correttamente. Se tutto è configurato correttamente, dovresti vedere i risultati attesi senza errori CORS.Per vedere come realizzare un’API rest vai qui

I nostri corsi

Corso Microsoft SQL Server

Corso di Microsoft SQL Server

Microsoft SQL Server, corso introduttivo. Come costruire un database, gestire l’inserimento modifica e cancellazione. Come interrogare i dati e come interagire coi dati nella rete.

Read More »
Facebook
Twitter
LinkedIn
Telegram