Angular getting CORS No Access-Control-Allow Origin when references css file on a https server

Question

I have an Angular 5 application with Web api back-end , however all I am looking to do is reference a CSS file on a production server.

What can I do to avoid the cross origin issue ( cors is enabled on the web api, but its not the web api , its simply a CSS file on that IIS server website.

Access to Font at 'https://prodserver/Content/Styles/fonts/icomoon.ttf?53j0gm' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' ...

I was attempted to use CORS in my angular application, and its nothing to do with web api cors, and i'm not using node ,

This is simply CSS ...

Solution

You need to configure the web server for CORS. The error you included is not for CSS, but for fonts. Fonts are subject to CORS restrictions on some browsers

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

Comments

[Admin]

It is not on Web api , index.html is referencing <link href="https://prodserver/Content/Styles/custom/dist/icisng-m‌​ain-bootstrap.css" rel="stylesheet">