Jednoduché API ve frameworku Slim 4 – č. 13 Úpravy API pro přístup z Vue aplikace
- Jednoduché API ve frameworku Slim 4 – č. 1 Instalace
- Jednoduché API ve frameworku Slim 4 – č. 2 Základní CRUD
- Jednoduché API ve frameworku Slim 4 – č. 3 Struktura API a připojení k databázi
- Jednoduché API ve frameworku Slim 4 – č. 4 Testování funkcionality našeho malého API
- Jednoduché API ve frameworku Slim 4 – č. 5 Vylepšení UserControlleru
- Jednoduché API ve frameworku Slim 4 – č. 6 Přidání Model a Repositories
- Jednoduché API ve frameworku Slim 4 – č. 7 Validace dat
- Jednoduché API ve frameworku Slim 4 – č. 8 Přidáme si do datbáze produkty
- Jednoduché API ve frameworku Slim 4 – č. 9 Přidání zboží uživatelům
- Jednoduché API ve frameworku Slim 4 – č. 10 Autentizace uživatele
- Jednoduché API ve frameworku Slim 4 – č. 11 Endpointy pouze pro přihlášené uživatele
- Jednoduché API ve frameworku Slim 4 – č. 12 Testování našeho API
- Jednoduché API ve frameworku Slim 4 – č. 13 Úpravy API pro přístup z Vue aplikace
- Jednoduché API ve frameworku Slim 4 – č. 14 Úpravy API pro přístup z Vue aplikace preflight request a token v hlavičce
Rozhodla jsem se vytvořit aplikaci ve Vue, která bude přistupovat k našemu API. Aby to bylo možné doplníme si APi o endpoint na testování
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<?php namespace App\Controllers; use Psr\Http\Message\MessageInterface; use Psr\Http\Message\ResponseInterface as Response; use Psr\Http\Message\ServerRequestInterface as Request; class TestController { public function test(Request $request, Response $response, $args): MessageInterface|Response { $data = [ 'status' => 'success', 'message' => 'API je funkční!', 'timestamp' => time(), 'data' => [ 'version' => '1.0', 'cors' => 'enabled' ] ]; $response->getBody()->write(json_encode($data, JSON_PRETTY_PRINT)); return $response ->withHeader('Content-Type', 'application/json') ->withStatus(200); } } |
tak, abych mohla testovat zda jsem schopna se připojit k API z externí aplikace.
Další potřebná úprava je nastavení CORS (Cross-Origin Resource Sharing) v naší aplikaci takže v adresáři configsi vytvoříme
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php return [ 'settings' => [ 'origin' => ['http://localhost:5173'], // URL vaší Vue aplikace 'methods' => ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'OPTIONS'], 'headers' => [ 'X-Requested-With', 'Content-Type', 'Accept', 'Origin', 'Authorization' ] ] ]; |
a dále CorsMiddleware.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<?php namespace App\Middleware; use Psr\Http\Message\ResponseInterface as Response; use Psr\Http\Message\ServerRequestInterface as Request; use Psr\Http\Server\MiddlewareInterface; use Psr\Http\Server\RequestHandlerInterface as RequestHandler; class CorsMiddleware implements MiddlewareInterface { private array $settings; public function __construct(array $settings) { $this->settings = $settings; } public function process(Request $request, RequestHandler $handler): Response { $response = $handler->handle($request); return $response ->withHeader('Access-Control-Allow-Origin', implode(', ', $this->settings['origin'])) ->withHeader('Access-Control-Allow-Methods', implode(', ', $this->settings['methods'])) ->withHeader('Access-Control-Allow-Headers', implode(', ', $this->settings['headers'])); } } |
no a nezapomene v public/index.php
|
1 2 3 4 5 |
// Načtení konfigurace $corsSettings = require __DIR__ . '/../config/cors.php'; // Přidání middleware $app->add(new CorsMiddleware($corsSettings['settings'])); |