Am o aplicație Javascript care este livrată browserului de la un punct final CloudFront. Toate fișierele statice ale aplicației sunt găzduite într-o găleată S3. Aceasta implică o grămadă de fișiere javascript și css, precum și unele fișiere cu fonturi.
HTML-ul care încărcă întreaga aplicație este generat și livrat de un server, să numim acel server „https://my.domain.com”.
După cum am menționat, acesta este doar fișierul html. Toate Conținutul static este apoi descărcat de la punctul final cloudfront, care indică o găleată ca origine. Să le numim xxxx.cloudfront.net, iar găleata my-bucket.
Din câte am înțeles, aproape orice solicitare de la acel html generat către punctul final cloudfront este o solicitare CORS, deoarece originea html-ului este my.domain.com și, în mod clar, toate fișierele solicitate nu sunt găzduite pe acel domeniu.
Așa că, firește, m-am dus să configurez toate chestiile CORS. În primul rând, găleata este complet publică și are următoarea politică CORS:
[
{
„AllowedHeaders”: [
"*"
],
„AllowedMethods”: [
"OBȚINE"
],
„AllowedOrigins”: [
"*",
],
„ExposeHeaders”: [],
„MaxAgeSeconds”: 3000
}
]
Și asta pare să funcționeze, pentru orice... cu exceptia fișierele cu fonturi!
Probabil ar trebui să menționez structura de foldere a găleții. Are trei foldere, producție, dezvoltare și comun. Conținutul acestora ar trebui să se explice de la sine. Common conține fonturile, precum și unele biblioteci javascript terță parte. Producția și dezvoltarea conțin js și css pentru mediile lor respective.
În orice caz, Tot se încarcă, cu excepția fișierelor cu fonturi, pentru care primesc următoarea eroare:
Accesul la fontul de la „https://xxxx.cloudfront.net/common/fonts/outline/budicon-classic.ttf?jdete2” de la origine „https://my.domain.com” a fost blocat de politica CORS: Nu Antetul „Access-Control-Allow-Origin” este prezent pe resursa solicitată.
Mi s-a părut extrem de ciudat numai fișierele cu fonturi ar avea această problemă. Alte fișiere din folderul comun par să se încarce bine, și dacă doar lipesc https://xxxx.cloudfront.net/common/fonts/outline/budicon-classic.ttf?jdete2 în browserul meu, ea lucrări.
Singura diferență pare să fie că aceste fișiere nu sunt încărcate din html, ci din css prin intermediul @font-face. Privind solicitările generate de browser la încărcarea aplicației, văd clar că de exemplu este setat antetul de origine, ceea ce nu era pentru a solicita fișiere js sau css. Set-Fetch-Mode este setat la „cors”, în timp ce pentru celelalte fișiere a fost setat la „no-cors”.
În orice caz, am încercat să rezolv problema din partea cloudfront. Mai întâi, am adăugat antetul „Access-Control-Allow-Origin: *” la configurația de origine. Apoi am adăugat o configurație de comportament pentru origine pentru a permite GET, HEAD, OPTIONS pentru modelul de cale *.
Și acum... ei bine, acum mai am aceeași problemă și sunt complet fără idei, deși mă întreb de ce cererea creată de @font-face este formată atât de diferit în comparație cu cererile de resurse javascript și css, dar mai presus de toate, ce naiba pot face pentru a încărca în ele fonturi?
