why do File downloads get redirected to home page with vue.js history mode enabled on IIS - vue.js

I have the following setup: on IIS
A Vue.js app # https://localhost/some-app/
I need to be able to download files from an inner folder:
https://localhost/some-app/pdf-reports/test.pdf
With vue.js history mode enabled and configured,
why do requests for inner folders or files get redirected to the home page?
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Handle History Mode and custom 404/500" stopProcessing="true">
<match url="(.*)" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>

Related

deploy a Vue+Electron application for both desktop and web application

I have used this template for developing my application which is a Vue app with an Electron builder. Now I have a problem:
I need to build production and deploy my project once as an electron package and another time for a web application hosted on a web server. I do not want to separate it into two repositories as well. Do anybody have any suggestions?
I have tried using dist folder as root folder of website and I have added a web.config file as follow to the root but I am getting an error.
web.config file content:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Vue" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_URI}" pattern="^/api/.*" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
the error on IIS:
Yes, you need to install url rewrite module on IIS. Otherwise, IIS won't understand what <rewrite> <rules> <rule name="Vue" stopProcessing="true"> means in web.config.
Download it from here

Deploying a Vue app to IIS under the Default web site

I was successfully able to get a Vue app working in iis at the root level with a port(8181),
but I need to get it working under the Default Web Site in iis (port 80)
To test this I started a brand new website with the Vs19 template. ( should have used vue scaffolding, will try that tomorrow, done, reproduces the same error)
Got it up and running under npm run serve.
Ran npm run build
Went to IIS, added a new app under Default Web Site" called VuejsApp2 pointing to the dist folder under the main folder.
Copied the default web.config for a vue app:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Handle History Mode and custom 404/500" stopProcessing="true">
<match url="(.*)" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
<httpErrors>
<remove statusCode="404" subStatusCode="-1" />
<remove statusCode="500" subStatusCode="-1" />
<error statusCode="404" path="/survey/notfound" responseMode="ExecuteURL" />
<error statusCode="500" path="/survey/error" responseMode="ExecuteURL" />
</httpErrors>
<modules runAllManagedModulesForAllRequests="true"/>
</system.webServer>
</configuration>
Went to the Dist folder and set security user "Everyone" and gave it full access to the folder (yes I know, it's a test)
Made sure sure URl re-write was installed (required to get app working at base) by looking under installed apps
Pointed the app in IIS to the same App pool that worked for the other app (integrated, no
When I navigate to the app in chrome at http://localhost/VuejsApp2
I get a 503 service is not available error
I figure it's something basic, but all the tutorials I've found to host vue in iis, this is all that's listed to do, I found a SO question on the same topic, but it had no answers...
Other SO question with no answer
I read that 503 in IIS meant that the app pool was stopped due to multiple crashes, but the app pool shows started not stopped.
UPDATE:
I added this to the web.config for my basic empty vue app and it still gets 503 error
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Handle History Mode and custom 404/500" stopProcessing="true">
<match url="(.*)" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/index.html" />
</rule>
</rules>
</rewrite>
<httpErrors>
<remove statusCode="404" subStatusCode="-1" />
<remove statusCode="500" subStatusCode="-1" />
<error statusCode="404" path="/survey/notfound" responseMode="ExecuteURL" />
<error statusCode="500" path="/survey/error" responseMode="ExecuteURL" />
</httpErrors>
<modules runAllManagedModulesForAllRequests="true"/>
</system.webServer>
</configuration>
On my original app, I did it and I"m getting a different unrelated error. so maybe it helped?
I would check your rewrite rule, I think you're getting an error due to too many redirects.
You're sending anything intended to be picked up by VueRouter to the root of your site, rather than to your index.html. Change your rewrite rule to this
<action type="Rewrite" url="/index.html" />
I think that might help solve your problem

URL Rewriting in IIS with Express

I want to rewrite all images to a different folder. I'm using IIS and have configured a rule in the web.config to redirect all requests to a node.js file as follows:
<rewrite>
<rules>
<rule name="img">
<match url="\/(.*).img" />
<action type="Rewrite" url="/handlers/img.js" />
</rule>
</rules>
</rewrite>
All requests are now being sent to the img.js file, where based on a condition, I want to redirect to another image file. But IIS now sends that file to the img.js and it ends up as a loop. Is there any way out of this loop?
You could try the below thing to resolve the issue:
set the condition to do not match the pattern:
<conditions>
<add input="{REQUEST_URI}" pattern="\/(.*).img.js" negate="true" />
</conditions>
or set <rule name="img" stopProcessing="true">
<rule name="img" stopProcessing="true">
<match url="\/(.*).img" />
<conditions>
<add input="{REQUEST_URI}" pattern="\/(.*).img.js" negate="true" />
</conditions>
<serverVariables />
<action type="Rewrite" url="/handlers/img.js" logRewrittenUrl="true" />
</rule>

Reverse proxy apache for TeamCity

I need to redirect a cname to a port.
I have Teamcity running on my server (at port 8111), I want to make teamcity.mydomain.com be redirected to mydomain.com:8111. So I will just need to type teamcity.mydomain.com to get into teamcity server.
I have read that reverse proxy from apache would do it for me, but so far I could not get it setup correctly.
ps.: it works when I do mydomain.com:8111.
I think something like this should work:
ProxyPass / http://example.org:8111/
ProxyPassReverse / http://example.org:8111/
ProxyPreserveHost On
Make sure mod_proxy is enabled to.
If you are running on Windows, and have IIS installed you can do this with IIS by installing the Application Request Routing module, and the Rewrite module. Once you do that, here is are the rewrite rules for your web.config. This rewrites all request for http://example.com to http://example.com:8080.
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="CIReverseProxyInboundRule" stopProcessing="true">
<match url="(.*)" />
<action type="Rewrite" url="http://example.com:8080/{R:1}" />
<conditions logicalGrouping="MatchAny">
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
</conditions>
</rule>
</rules>
<outboundRules>
<rule name="CIReverseProxyOutboundRule" preCondition="ResponseIsHtml1">
<match filterByTags="A, Form, Img" pattern="^http(s)?://example.com:8080/(.*)" />
<action type="Rewrite" value="http{R:1}://example.com/{R:2}" />
</rule>
<preConditions>
<preCondition name="ResponseIsHtml1">
<add input="{RESPONSE_CONTENT_TYPE}" pattern="^text/html" />
</preCondition>
</preConditions>
</outboundRules>
</rewrite>
</system.webServer>
</configuration>

Preserving URL when using SSL Redirect for multiple websites pointing to same folder

I have multiple websites pointing to a central folder (IIS 7.5)
company1.domain.com/wo pointing to D:\inetpub\wo
company2.domain.com/wo pointing to D:\inetpub\wo
company3.domain.com/wo pointing to D:\inetpub\wo
All the websites work for both HTTP and HTTPS (if typed manually). However, the sites have to connect via HTTPS. I want to setup automatic SSL redirect to but am having issues. I created URL Rewrite rule but since this is only one webconfig file the URL redirects to only one website (not maintaining the URL).
How do I setup SSL redirect so that the URLs are preserved and all websites point to the same folder?
Any assistance will be greatly appreciated.
Thanks
You should include the host header when checking if HTTPS is enabled and then redirect to the https URL for the appropriate domain.
Here's an example:
<rewrite>
<rules>
<clear />
<rule name="Force HTTPS - www.domain1.com" stopProcessing="true">
<match url="(.*)" />
<conditions logicalGrouping="MatchAll">
<add input="{HTTPS}" negate="true" pattern="^ON$" />
<add input="{HTTP_HOST}" pattern="\.domain1\.com$" />
</conditions>
<action type="Redirect" url="https://www.domain1.com{REQUEST_URI}" appendQueryString="false" redirectType="Permanent" />
</rule>
<rule name="Force HTTPS - www.domain2.com" stopProcessing="true">
<match url="(.*)" />
<conditions logicalGrouping="MatchAll">
<add input="{HTTPS}" negate="true" pattern="^ON$" />
<add input="{HTTP_HOST}" pattern="\.domain2\.com$" />
</conditions>
<action type="Redirect" url="https://www.domain2.com{REQUEST_URI}" appendQueryString="false" redirectType="Permanent" />
</rule>
<!-- add more rules for other domains if needed -->
</rule>
</rules>
</rewrite>
You can add as many rules for domain names as you want.
EDIT: Sorry, I misread your question. In that case it's even simpler:
<rewrite>
<rules>
<clear />
<rule name="Force HTTPS" stopProcessing="true">
<match url="(.*)" />
<conditions logicalGrouping="MatchAll">
<add input="{HTTPS}" negate="true" pattern="^ON$" />
</conditions>
<action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" appendQueryString="false" redirectType="Permanent" />
</rule>
</rules>
</rewrite>
No need to check for the host header, just include the host name in the redirect. You only have to make sure that you have SSL certificates for all domain names.