Accessing FA pro kit icons through CORS

[sam-19]

Hey,

Thank you for the great work! Converting my simple project from Shoelace to Web-Awesome went surprisingly smoothly. However, I'm having trouble accessing my FA pro icons due to CORS violation. When I use the data-fa-kit-code method the app tries to load the icons from ka-p.fontawesome.com, but the request is blocked by CORS policy.

How do I configure access to my pro icons kit so it will work with CORS?

Kind regards,
Sam

[claviska]

Hi there!

Can you verify you've added the target domain to your kit settings in the Font Awesome dashboard?

Thanks!

[sam-19]

Hi Cory!

I'm running it in my development environment, so it's just hosted on localhost. Is there a way to add it to the kit or a way to configure it from the app side?

~ Sam

[sam-19]

Oh, and it's set as Open on the dashboard.

[claviska]

I can't seem to replicate this with any of our kits. Can you show us the code you're using to set the kit code and render the icons? (Please mask your kit code — don't post it here!)

[sam-19]

I found out the reason. One of the icon names had changed from Shoelace and one contained a typo. For some reason this resulted in the below CORS error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://ka-p.fontawesome.com/releases/v6.5.2/svgs/regular/wrong-icon-name.svg?token=XXX. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

After changing the icon names it started to work. No idea why it gave the CORS error, but it seems to be working now. Could it be that some generic error response returned by your server has misconfigured CORS headers?

Sorry for the trouble and thanks for the quick responses!

~Sam