The IIS URL rewrite is causing issues with the rewriting of CSS and JS files

Struggling with my URL rewrites - every time I set up a rewrite for a page, it ends up affecting the CSS and JS files linked within the webpage, resulting in them not displaying properly.

In an attempt to fix this issue, I tried using fully qualified paths for the CSS and JS files. While this worked fine on pages without rewrites, accessing a rewritten page caused the browser to hang.

Has anyone else faced a similar problem and found a solution? Any help would be greatly appreciated. I've looked through the site for solutions but haven't had any luck so far.

<rewrite>
<outboundRules>
<rule name="OutboundRewriteUserFriendlyURL1" preCondition="ResponseIsHtml1" stopProcessing="true">
<match filterByTags="A, Form, Img" pattern="^(.*/)myapplicationname/Index\.html\?team=([^=&amp;]+)$" />
<action type="Rewrite" value="{R:1}team/{R:2}/" />
</rule>
<preConditions>
<preCondition name="ResponseIsHtml1">
<add input="{RESPONSE_CONTENT_TYPE}" pattern="^text/html" />
</preCondition>
</preConditions>
</outboundRules>
<rules>
<rule name="RedirectUserFriendlyURL1" stopProcessing="true">
<match url="^myapplicationname/Index\.html$" />
<conditions>
<add input="{REQUEST_METHOD}" pattern="^POST$" negate="true" />
<add input="{QUERY_STRING}" pattern="^([^=&amp;]+)=([^=&amp;]+)$" />
</conditions>
<action type="Redirect" url="{C:1}/{C:2}" appendQueryString="false" />
</rule>
<rule name="RewriteUserFriendlyURL1" stopProcessing="true">
<match url="^([^/]+)/([^/]+)/?$" />
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="Index.html?{R:1}={R:2}" appendQueryString="false" />
</rule>
</rules>
</rewrite>

within the webpage:

<script src="/myapplicationname/Scripts/jquery-1.4.1.js" type="text/javascript">    </script>
<link href="/myapplicationname/Styles/MainStyle.css" rel="stylesheet" type="text/css" />

The rewrites are also affecting these files, looking for /myapplicationname/Team/Styles/MainStyle.css and similar with the JS file.

Answer №1

To troubleshoot the issue, try eliminating rules one by one to identify which one is causing the problem. Then, modify a rule by adding a condition:

    <rule name="Updated rule">
      ...
      <conditions logicalGrouping="MatchAny">
          <add input="{URL}" pattern="^.*\.(ashx|axd|css|gif|png|jpg|jpeg|js|flv|f4v)$" negate="true" /> 
      </conditions>
    </rule>

This adjustment will prevent the rule from affecting files with extensions like .js, .css, and more.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Unlock the secret to effortlessly redirecting users to a designated page when they click the browser's back

So I'm facing the challenge of disabling the browser back button on multiple routes and sending requests to the backend is resulting in inconsistent behavior. I don't want to create a multitude of similar API requests each time. Currently, I have ...

Encountering an issue with Meteor and node-celery: "Unable to access property 'slice' of null"

Check out the Github repository for reproducing this issue Run localhost:3000 to replicate the problem. In my setup with Meteor 1.4.4.1, I am utilizing the node-celery npm packages on the server side. Upon Meteor initialization, the client automatically i ...

Retrieving image source from JSON data using AngularJS

I am attempting to retrieve an image from an API using AngularJS. The approach I'm taking involves triggering the $http function with a link and attempting to extract the image URL from the JSON response to display it in the HTML. However, despite re ...

I'm currently working with Bootstrap 5. Is there a technique available to reposition the elements within a div without relying on padding or margin properties?

Developing a Website: <!DOCTYPE html> <html lang="en" class="h-100"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" ...

Encountered an error trying to access the length property of an undefined variable while passing props

I need help with my shopping app project. I am trying to create a feature where if the cart is empty, it should display a message saying "shopping cart is empty." However, when I try to implement this, I keep getting a type error that says "Cannot read p ...

ways to change date format in a React.js application using JavaScript

<b>Choose Date and Time</b><br/> <DateTimeField onChange={this.clockevent} format={"x"}/> clockevent=(newDate)=>{ var dateVal ="/Date("+newDate+")/"; var date = new Date(parseFloat(dateVal.substr(6))); console.log( ...

The CORS Policy error message "The 'Access-Control-Allow-Origin' header is missing on the requested resource" in Next.js

Encountered an issue with CORS Policy error while attempting to redirect to a different domain outside of the project. For example, trying to navigate to https://www.google.com through a button click or before certain pages load. The redirection was handl ...

Activate the CSS on a click event using the onClick method

I am trying to implement a transition that triggers when clicking on a specific div element. Currently, the transition only occurs with the active css class. How can I achieve this effect by simply clicking on the div itself? I am using reactjs and believe ...

In node.js, what is the syntax for invoking a function within a struct from that same function?

Here is a brief overview of my code: exports.entity = { name: "Foo", //Etc... start: function () { this.attack(); }, attack: function () { setTimeout(attack, 1000); //Doesn't work ...

Tips for sending multiple pieces of data to an Arduino with NodeJS's serialport library

I am having trouble writing multiple data using the same port, but I see that node-serialport allows for reading multiple data functions simultaneously. How can I also write multiple data at the same time? This is how I have attempted it: - index.js- con ...

Issue with fancyBox not functioning properly when integrated with a caption script

Hey there! I've been working with both jQuery's fancyBox for displaying image/video galleries and the Capty script for showing image titles on images. However, I've run into a snag - when the title is displayed on the image, fancyBox st ...

Obtaining the value of a checkbox with React

I have a form with two input fields (email, password) and a checkbox. The code for the form is shown below: <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}> <TextField margin="normal" required ...

Update the content of the widget

Currently, I am utilizing the following script to display NBA standings: <script type="text/javascript" src="https://widgets.sports-reference.com/wg.fcgi?script=bbr_standings&amp;params=bbr_standings_conf:E,bbr_standings_css:1&amp"></sc ...

Utilize React to reduce, replace, and encapsulate content within a span element

I have a Map that receives JSON data and generates a list item for each value. Then, I modify specific parts of the strings with state values. const content = { "content": [ { "text" : "#number# Tips to Get #goal#" ...

Unusual body padding found in the mobile design

When visiting on a mobile device and inspecting the elements in Google Chrome, try disabling the style rule overflow-x: hidden from the body element and then resizing the window. You may notice a white vertical stripe (padding) appearing on the right side ...

What could be causing these "areas" or "panels" to intersect with each other?

As I work on constructing a website, I'm facing an issue with the top two sections. They appear correctly when my screen is full size, but as soon as I adjust the screen size, they jump down and create white space. It seems like I may have approached ...

Exploring the bond between siblings from a child's perspective

Is there a way to apply styling to the .item class when the corresponding input field is checked? <input> <span class="item"> I have discovered that I can achieve this using input:checked ~ .item {} However, my challenge lies in obtaining th ...

Using the Spread Operator to modify a property within an array results in an object being returned instead of

I am trying to modify the property of an object similar to this, which is a simplified version with only a few properties: state = { pivotComuns: [ { id: 1, enabled : true }, { id: 2, enabled : true ...

HTML validation produces mistakes

I encountered an issue when using Google Fonts and received the following error related to a specific link: <link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Montserrat:700|Mer ...

The debate between ensuring input validity and making fields mandatory on multi-page forms

I am currently working on a multi-page form and using jQuery Validate to validate it. The user has four options: next, prev, save, submit. Save, next, and prev all save the current page within the form; whereas submit is similar to save, but triggers addi ...