146

I am runing an App on app harbor written in MVC4.

A bundle of css files doesn't work. In my local computer in debug mode I see the code of the App and I see the files. The App works as expected.

<link href="/Content/css/home/basic-jquery-slider.css" rel="stylesheet"/>
<link href="/Content/css/home/Home.css" rel="stylesheet"/>

When I upload the app to Appharbor I see the bundle in the code but the App doesn't work.

<link href="/Content/css/home?v=zhVOIpUNuvCOZhJyBcQWpMlozayor4te6k-pM29wHqI1" rel="stylesheet"/>

When I browse that link in the href I get 403 - Forbidden: Access is denied.

How to troubleshoot this?

1

11 Answers 11

288

My guess is that the path Content/css exists on disk in your app. In this case IIS would be handling the request, not MVC.

Make sure that the virtual path for the bundle (the parameter of the StyleBundle constructor) doesn't match a folder in the file system.

From the comments:

"A good convention to follow when creating bundles is to include "bundle" as a prefix in the bundle name. This will prevent a possible routing conflict."

6
  • 3
    thanks. Is it normal that it works when in run in the localhost? Aug 23, 2012 at 19:50
  • 9
    @RicardoPolo, by "localhost", do you mean while running it on iis express on your development machine? Then yes, it's normal that it works there because you're most likely running in debug mode, which disables bundling.
    – bvgheluwe
    Jan 13, 2014 at 15:37
  • 1
    Paul, I can't thank you enough for that solution! I was pulling my hair out for an hour trying to figure out what I had wrong!
    – user1921
    May 30, 2014 at 14:55
  • 11
    +1 This answer help me understanding how the virtual paths works with bundling. I read the original post on msdn (asp.net/mvc/tutorials/mvc-4/bundling-and-minification) but after solving my problem with your answer, I found at the end of the post a bit of text talking about virtual path: "A good convention to follow when creating bundles is to include "bundle" as a prefix in the bundle name. This will prevent a possible routing conflict.". I think this sentence SHOULD have been put in bold with a red/yellow warning image. :D Thank you!
    – Samuel
    Jul 14, 2014 at 19:47
  • I found this thread awhile back, and so, made my bundle paths completely different from my file paths, everything has worked in test, but when the bundles actually kicked in, all of the relative paths embedded within the css fell apart, and started producing 404 errors. As SO questions are supposed to be specific enough to solve a particular problem, I think it is also worth mentioning in comments that the information above must take into account other answers like: stackoverflow.com/questions/20484188/… if your css uses URL Paths.
    – Jason D.
    Jun 19, 2017 at 15:34
46

This issue is by default .NET does not "process" requests that have a .js or .css extension.

There are two fixes for this (you only need to do ONE)

A) Remove the extensions from the bundle names. (recommended) This will cause .NET to process the request and run it through the BundleModule.

B) Add this to your web.config in the system.webServer section which will cause .NET to run .js and .css requests through the BundleModule.

<modules runAllManagedModulesForAllRequests="true">
  <remove name="BundleModule" />
  <add name="BundleModule" type="System.Web.Optimization.BundleModule" />
</modules>

Big shout out to Ray Moro who figured out the actual cause and shared it with me on my blog: http://blog.cdeutsch.com/2012/11/fixing-404-errors-for-aspnet-mvc-apps.html

5
  • Updated with more information on the root cause along with a second option.
    – cdeutsch
    Jul 23, 2013 at 23:22
  • 1
    I was having this problem because my bundle's name was a folder-like name ending in "css". Though my bundle didn't exactly had a file extenssion, suggestion A lead me to the problem.
    – dsnunez
    Jun 10, 2014 at 7:07
  • 1
    This should be correct answer, it helps me with same problem.
    – psulek
    Jul 14, 2015 at 12:43
  • great answer it help me
    – DKR
    Sep 10, 2015 at 10:56
  • This thing with the missing <module> section from web.config oh man ...
    – XDS
    Sep 14, 2017 at 11:09
20

Happened with me too, when I tried deploying my ASP.NET MVC app on AppHarbor.

I had a stylesheet bundle with the name

@Styles.Render("~/Content/bootstrap")

and the folder structure was

-- Content

-- Content \ Bootstrap \ ...

By just changing the bundle name to "~/Content/bootstrap-css" my issue got resovled.

0
15

I know I'm 4 years late to this question but this worked for me.

public static void RegisterBundles(BundleCollection bundles)
{
   ...

   BundleTable.EnableOptimizations = true;     // Added this           
}
2
  • 2
    Of all the answers above and below. This is the only one that worked for me.
    – Haim Katz
    Feb 21, 2017 at 12:47
  • 3
    This enables optimizations when you're in debug mode. While this is a great way to check if bundles work on a dev machine, you shouldn't leave this statement in your code.
    – Rudey
    Feb 28, 2017 at 17:19
9

403 error solved. here is a detailed explanation and solution for 403 error.
The solution is demonstrated for CSS bundle. However it also applies to JavaScript.

http://www.mvccentral.net/Story/Details/articles/kahanu/stylebundle-403-error-solved

In a nutshell, make sure that the virtual path [Script | Style]Bundle("~/content/[script | css]") doesn't match a folder in the file system (e.g. C:\approot\Content\[script | css]) instead [Script | Style]Bundle("~/content/[scriptDiff | cssDiff]")

2
  • 2
    Thanks, this is the problem that I experienced. To solve it, in BundleConfig.cs I changed the path from @Styles.Render("~/Content/css") to @Styles.Render("~/bundles/css"). Now it works when running locally in debug mode and when published in release or debug mode.
    – Ken Palmer
    Apr 28, 2015 at 19:10
  • Nice reply, but you shouldn't leave only a link, at least the basic steps of this write-up would be great to have here, in case the linked website is down. May 15, 2015 at 14:19
5

I solved the issue by adding below line of code at BundleConfig class

BundleTable.EnableOptimizations = false;
3

What I do is very simple,

I add "js" at the end of ScriptBundle like so: new ScriptBundle("~/bundles/appjs") And I add "css" at the end of StyleBundle like so: new StyleBundle("~/content/appcss")

My folder names never end with "js" or "css".

That should do it.

2

This applies to the 'ScriptBundle class' too, ensure that the 'parameter name' to the constructor does not match a path in web application file system. Remember that IIS will try to serve up the file/request.

1

The problem can also come from the file being encrypted. This occurred to me when I downloaded BootStrap and used the supplied files. They showed green in Windows explorer and worked fine in Visual Studio, but when deployed, I got a 403 error.

You can see if they are encrypted by going to properties, then advanced properties and there is an encypted checkbox.

Uncheck and it will no longer be a problem.

0

I have the same problem with that (403 Forbidden) error. In my case the reason is proxy server in my organization blocks my css file. Css file name matches one of block rules.

0

I found out the file bootstrap.css wasn't in the content folder, so I looked for it in the packages and pasted there.. it worked!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.