No 'Access-Control-Allow-Origin' header is present on the requested resource. when accessing from localhost

[ianlintw]

Hi,

I am just starting to try out Semantic UI in my react project on a localhost machine. I add a CDN link of semantic.min.css as , but my browser complains that when it is trying to fetch icons.woff, icons.woff2, and icons.ttf it is blocked by CORS policy. It looks like the server hosting the resource needs to send out 'Access-Control-Allow-Origin' header, based on what I see in the browser console. Thoughts? Thanks in advance!

Best,
Ian

---

Here are the full error message:
Access to font at 'https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXiWtFCc.woff2' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field accept-language is not allowed by Access-Control-Allow-Headers in preflight response.
localhost/:1 GET https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXiWtFCc.woff2 net::ERR_FAILED
localhost/:1 Access to font at 'https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/themes/default/assets/fonts/icons.woff2' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
localhost/:1 GET https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/themes/default/assets/fonts/icons.woff2 net::ERR_FAILED
localhost/:1 Access to font at 'https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field accept-language is not allowed by Access-Control-Allow-Headers in preflight response.
localhost/:1 GET https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2 net::ERR_FAILED
localhost/:1 Access to font at 'https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/themes/default/assets/fonts/icons.woff' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
localhost/:1 GET https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/themes/default/assets/fonts/icons.woff net::ERR_FAILED
localhost/:1 Access to font at 'https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/themes/default/assets/fonts/icons.ttf' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
localhost/:1 GET https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/themes/default/assets/fonts/icons.ttf net::ERR_FAILED

[gilbertoalbino]

Same problem here.

I am using:

<link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
    />

and the icons show a square box.

The console logs:

Access to font at 'https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/themes/default/assets/fonts/icons.ttf' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
localhost/:1 GET https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/themes/default/assets/fonts/icons.ttf net::ERR_FAILED

I am developing on Localhost.

[niazangels]

@ianlintw @gilbertoalbino By any chance do you guys have Location Override turned on? I turned it off and things started to work.
Seems like some sort of CDN rules are in place - switching to jsdeliver CDN (https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css) did not help either until I turned it off.

[gilbertoalbino]

@niazangels thanks!
I indeed had Location Override turned on!
I turned it off and it did the trick.
The problem is that I must use it on since I'm working on a project that demands switching countries this way.
But to solve it on development, I downloaded the assets and fonts into the project.

[gihan9a]

Seems Google Chrome's locale override for location feature doesn't accept.

By default, it uses en_US for "San Fransisco" and leads to CORS error. When I override the local to en-US then it starts working with location override.