InertiaJS je naozaj pôsobivý prístup k budovaniu fullstack webových aplikácií. Prvýkrát som o ňom pravdepodobne počul v Javascript Jabber od devchat.tv v epizóde 443. Adoptovanie bolo pomerne priamočiare, keďže som mal predchádzajúce skúsenosti s Laravel, TailwindCSS a Svelte (čo je stále môj výber pre front-end).

Problém #

Jediný problém, na ktorý neustále narážam, je táto chybová správa:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost/item?page=2. (Reason: CORS request did not succeed)

CORS alebo Cross-Origin Resource Sharing je bezpečnostná funkcia a nie je to nič nové. Dôvod, prečo sa táto správa objavuje v mojom prípade, je Browsersync reloading v Laravel Mix. Browsersync funguje tak, že proxuje hostiteľskú URL adresu, v mojom prípade http://localhost, na inú, ktorá je úplne pod kontrolou Browsersync – predvolená je http://localhost:3000/. V tomto bode si nie som celkom istý, čo sa pod kapotou Browsersync deje, takže ak viete lepšie vysvetliť, dajte vedieť. Určite to ide.

Riešenie #

Každopádne, zdá sa, že existuje akceptované riešenie, ako sa s týmto problémom vysporiadať. Nižšie som zahrnul najrelevantnejšie odkazy, ale vo všeobecnosti sú potrebné dva kroky:

Krok 1. Konfigurácia možností Browsersync #

Pri použití Browsersync cez Laravel Mix vložte nasledovné do webpack.mix.js:

.browserSync({
  proxy: 'localhost',
  host: 'localhost:3000'
})

Krok 2. Informovanie front-endu #

Vložte nasledujúci riadok do resources/views/app.blade.php, takmer úplne na koniec stránky:

@if (app()->isLocal())
<script src="http://localhost:3000/browser-sync/browser-sync-client.js"></script>
@endif
<!-- here is the end of the page
  </body>
</html>
-->

Krok 3. Sledovanie #

Teraz spustite sledovanie aplikácie v záložke prehliadača na http://localhost:3000, ktorá sa otvorí a automaticky znova načíta pri zmene zdrojových súborov:

npm run watch

S týmto riešením mám dva problémy. Prvý je ten, že časť so skriptom sa dostane do produkčného bundle, ale ukazuje na neexistujúci súbor. Nie je to až taký problém a dá sa to vyriešiť, hoci riešenie by malo byť ponúknuté automaticky.

Druhý, horší problém, je ten, že pri veciach ako stránkovanie sa URL proxuje až po úplnom obnovení stránky. Po navigácii v InertiaJS aplikácii proxy prestane fungovať, čo je počas vývoja dosť rušivé. Pokúsim sa otvoriť issue, keď sa o skutočnom správaní dozviem viac.

Odkazy #