CSS, images, JS do not load in IIS

Question

My applications worked fine, but suddenly all sites under IIS do not load css, images, scripts. It is redirected to the login page.

If I log in, it works fine. e.g. mysite.com/Account/LogOn?ReturnUrl=%2fpublic%2fimages%2ficons%2f41.png

On my local machine, it works fine without logging in.

Answer 1

This was a Windows permission issue, I moved the folder where it inherits the wrong permissions. When I go to the wwwroot folder and add permission to the iis user, it starts working fine.

Answer 2

The problem may be that IIS does not serve static content, which you can configure here:

Source: http://adilmughal.com/blog/2011/11/iis-7-not-loading-css-and-image/

Windows 10:

Answer 3

I had the same problem: the page without authentication did not load CSS, JS and images when I installed my web application in ASP.Net 4.5 in IIS 8.5 on Windows Server 2012 R2.

1. I have the role of static content
2. My web application was in the wwwroot IIS folder, and all permissions for the Windows folder were intact (by default, including IIS_IUSRS)
3. I added authorization for all folders that contained CSS, JS, and images.
4. I had a web application folder on a Windows share, so I removed the sharing as suggested by @ imran-rashid

However, nothing seemed to solve the problem. Then, finally, I tried to set the application pool identifier for the anonymous user ID, and it started working.

I hit my head for several hours and hope this answer saves the agony of my fellow developers.

I really would like to know why this works. Any thoughts?

Answer 4

I had a similar error, my console looked like this:

My problem was that I launched my site in a subfolder, as the company used one top domain and no subdomains. Like this:

host.com/app1

host.com/app2

My code looked to include scripts that worked fine on localhost but not in app1 or app2:

<link rel="stylesheet" type="text/css" href="/Content/css/font-awesome.min.css" /> 

Added tilde sign ~ to src, and then everything works:

 <link rel="stylesheet" type="text/css" href="~/Content/css/font-awesome.min.css" /> 

Explanation ~ vs / :

• / - site root
• ~/ - The root directory of the application

/ will return the root of the site ( http://host.com/ ),

~/ will return the root of the application ( http://host.com/app1/ ).

Answer 5

This may not answer your question, but I hit my head with the same symptoms with a new installation of IIS. CSS, JS and images did not show. This is because the "static content" role is not installed in IIS 7.5.

Answer 6

Try removing the staticContent section from web.config .

 <system.webServer> <staticContent> ... </staticContent> </system.webServer> 

Answer 7

Probably Windows authentication is enabled in your web.config. On the local computer, your Windows credentials are automatically transferred and work. On a real site, you are considered as an anonymous user (IE configuration can control this, but do not change this if you really do not know what you are doing).

This causes the following:

• You need to log in explicitly.
• Resources, such as scripts and CSS, are not displayed on the login page because you are not authenticated.

It is not broken, it just works as intended, but the “fix” is:

• Change the authentication type in the web.config file if you do not need a login.
• And / or add web.config to the directory (s) containing CSS, images, scripts, etc. that defines authorization rules.

Answer 8

Add this to your web.config

 <location path="Images"> <system.web> <authorization> <allow users="*" /> </authorization> </system.web> </location> 

Answer 9

Use this in the configuration section of your web.config file:

 <location path="images"> <system.web> <authorization> <allow users="*"/> </authorization> </system.web> </location> <location path="css"> <system.web> <authorization> <allow users="*"/> </authorization> </system.web> </location> <location path="js"> <system.web> <authorization> <allow users="*"/> </authorization> </system.web> </location> 

Answer 10

To add this to web.config , the problem

 <system.webServer> <modules runAllManagedModulesForAllRequests="true" > <remove name="UrlRoutingModule"/> </modules> </system.webServer> 

Answer 11

My hour of pain was due to the definition of MIME types in web.config. I needed this for the development server, but the local IIS hated it because it duplicated MIME types ... as soon as I removed them from web.config, the problem with js, css and images did not load.

Answer 12

In my case

IIS can load everything using localhost , but was unable to load my app.tag template app.tag from 192.168.0.123

since the .tag extension .tag not on the list.

Answer 13

To fix this:

Go to the Internet Information Service (IIS)

Click on your site where you are trying to upload the image.

In the IIS section, open the Authentication and Enable Windows Authentication menus.

Answer 14

One of the suggestions that I found useful in the past when developing sites in the localhost test environment when working with a copy of a production site. Make sure you comment on the canonical tags:

  <!--<base href="http://www.example.com/">//--> 

Answer 15

If you tried all of the above solutions and still have problems, consider using the ASP.NET ResolveClientUrl () method.

A script for an example:

Instead of using

 <script src="~/dist/js/app.min.js" ></script> 

Use method

 <script src="<%= ResolveClientUrl("~/dist/js/app.min.js") %>" ></script> 

It was my decision that worked for a friend whom I helped!

Answer 16

I had the same problem. For me, this was due to the fact that the Cache-Control header was set at the server level in IIS as no-cache, no-store. So for my application, I had to add below to my web.config:

 <httpProtocol> <customHeaders> <remove name="Cache-Control" /> </customHeaders> </httpProtocol> 

Answer 17

One possible reason for this is that your application will run on port 443 (standard SSL port), and port 443 is already in use. Several times I came across developers trying to launch our application when Skype works on their computers.

Incredibly, Skype runs on port 443. This, in my opinion, is a terrible design flaw. If you see that your application is trying to run on 444 instead of 443, turn off Skype and the problem will disappear.

Answer 18

I added app.UseStaticFiles(); this code in starup.cs of the Configure method, how it is fixed.

And check your permission for this folder.

Answer 19

To use images

 @Url.Content("~/assets/bg4.jpg") 

in style use this

 style="background-image:url(@Url.Content("~/assets/bg4.jpg"))