GitHub GitHub Repository

Ziel

Im zweiten Teil des Blogbeitrags zum Bild-Upload werden wir eine Backend API-Route erstellen, die Umgebungsvariablen anpassen und die Kommunikation zwischen Frontend und Backend (CORS) sicherstellen.

Voraussetzungen

Das Laravel-Backend aus Teil 1 sollte bereits implementiert sein.

Backend-Route hinzufĂŒgen

Als erstes fĂŒgen wir in der Datei api.php im Verzeichnis backend/routeseine Route fĂŒr POST-Requests ein:
api.php
Before
				
					<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

Route::middleware("auth:sanctum")->get("/user", function (Request $request) {
    return $request->user();
});
api.php
Change
				
					Route::post("/save/image", function (Request $request) {
    (new App\Http\Controllers\ImageController())->saveImage($request);
});
api.php
After
				
					<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

Route::middleware("auth:sanctum")->get("/user", function (Request $request) {
    return $request->user();
});

Route::post("/save/image", function (Request $request) {
    (new App\Http\Controllers\ImageController())->saveImage($request);
});

Backend .env-File anpassen

Als nĂ€chstes mĂŒssen wir Anpassungen am .env-File vornehmen:
.env
Before
				
					APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:es1A0OLpKyOO2lSodFxbJZI5KX5VDNIbdN8zbFzn7+0=
APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=backend
DB_USERNAME=root
DB_PASSWORD=

BROADCAST_DRIVER=log
CACHE_DRIVER=file
FILESYSTEM_DISK=local
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

MEMCACHED_HOST=127.0.0.1

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=smtp
MAIL_HOST=mailpit
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="hello@example.com"
MAIL_FROM_NAME="${APP_NAME}"

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=mt1

VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

Am Ende der Datei fĂŒgen wir folgende zwei Wertpaare ein:

.env
Change
				
					FRONTEND_URL=http://localhost:3000
BACKEND_URL=http://localhost:8000
Damit sagen wir Laravel, dass unser Frontend unter der URL http://localhost:3000 und unser Backend unter der URL http://localhost:8000 erreichbar sein wird.
Das vollstĂ€ndige .env– File sieht dann so aus:
.env
After
				
					APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:es1A0OLpKyOO2lSodFxbJZI5KX5VDNIbdN8zbFzn7+0=
APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=backend
DB_USERNAME=root
DB_PASSWORD=

BROADCAST_DRIVER=log
CACHE_DRIVER=file
FILESYSTEM_DISK=local
QUEUE_CONNECTION=sync
SESSION_DRIVER=cookie
SESSION_LIFETIME=120

MEMCACHED_HOST=127.0.0.1

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=smtp
MAIL_HOST=mailpit
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="hello@example.com"
MAIL_FROM_NAME="${APP_NAME}"

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=mt1

VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

FRONTEND_URL=http://localhost:3000
BACKEND_URL=http://localhost:8000
Um eine reibungslose Kommunikation zwischen Frontend und Backend zu gewĂ€hrleisten, fĂŒgen wir in der Datei backend/config/cors.php noch die Frontend-URL hinzu:
cors.php
Before
				
					<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */

    'paths' => ['api/*', 'sanctum/csrf-cookie'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

];
In Zeile 22 Àndern wir den Wert allowed_origins von ['*'] auf ['http://localhost:3000']:
cors.php
Change
				
					'allowed_origins' => ['http://localhost:3000'],

Die Datei sieht abschließend so aus:

cors.php
After
				
					<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */

    'paths' => ['api/*', 'sanctum/csrf-cookie'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['http://localhost:3000'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

];

Mehr Informationen zu Cross Origin Ressource Sharing (CORS) gibt es hier CORS-Error.

NĂ€chster Teil
react logo
React

Bild-Upload mit Laravel

3/3: React Frontend

Im letzten Teil der Bild-Upload-Serie wird das React-Frontend erstellt. Damit wird das User Interface zur VerfĂŒgung gestellt, welche das AuswĂ€hlen und Hochladen des Bildes ermöglicht.

Weiterlesen