ASPNETCDN Bootstrap Graphicons not working

Question

We have a problem with bootstrap 3.3.5, Graphicons do not work if using bootstrap css from ASPNETCDN

The following is the error message:

Font from origin 'http://ajax.aspnetcdn.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.

This is a demo of http://jsfiddle.net/g7jt1tcd/4/

I searched, but still did not have relevant information. Can you give some tips to fix this problem?

Answer 1

This seems like a configuration issue with ASPNETCDN. My suggestion is to use a different CDN, since you have no control over the servers. Here are 2 more CDNs I would recommend:

• http://www.bootstrapcdn.com/
• https://cdnjs.com/libraries/twitter-bootstrap

Example:

 <script>https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css</script> 

Both CDNs have high availability. I just tested them against jsfiddle and worked without problems.

See here: http://jsfiddle.net/g7jt1tcd/4/

Answer 2

I work with VS2015, ASP.NET MVC 6 (RC) , and also had problems (error messages in the link, icons did not show) with glyphons in production (where he worked in VS (development)). The reason is that the MS cdn page does not work (at least right now from Switzerland): http://www.websitedown.info/ajax.aspnetcdn.com

Therefore (as a temporary workaround), I changed the external link in _Layout.cshtml (under the environment names = "Staging, Production") to an "internal" link: from:

 <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/css/bootstrap.min.css" 

to

 <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" 

After that, he works again.
Update:
If you posted a problem for MS here: my post on MS github
CORS requests seem to be blocked ...

Answer 3

Just review this and add this as an optional answer that might help someone who needs a little fix.

Using this code

 <environment names="Staging,Production"> <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/css/bootstrap.min.css" asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" /> </environment> 

I get and I see that glyphics are not loading.

Adding crossorigin="anonymous"

 <environment names="Staging,Production"> <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/css/bootstrap.min.css" crossorigin="anonymous" asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" /> </environment> 

will cause glyphics to load, but it still doesn’t work. He just fails.

I switched to maxcdn, which provides a CDN for bootstrap css and js.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="" crossorigin="anonymous" asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" /> 

It is not possible to set the integrity integrity attribute using "Could not find a valid digest in the integrity attribute for the resource," so the workaround is to set it as an empty string.