Using HashLocationStrategy with Adal causes infinite routing - angularjs

In in my angular cli app I'm using adal-angular4 for login authentication. When deployed in Azure the app works fine when the routing starts from homepage with the login flow. But refreshing the page on any other route gives an 404 ERROR.
ERROR: The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.
Found out that Hashlocationstrategy solves this issue so I added it to my AppModule
This puts my app in localhost to loop in login stage. The app never reaches the home page.
The app keeps looping these two routes. Is there anything to solve this issue?

I solved it by adding a web.config file to my app and also including it in the dist build folder
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="AngularJS" stopProcessing="true">
<match url="^(?!.*(.bundle.js|.bundle.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.png|.jpg|.ico|.eot|.woff2|.woff|.svg|.ttf)).*$" />
<conditions logicalGrouping="MatchAll">
</conditions>
<action type="Rewrite" url="/" appendQueryString="true" />
</rule>
</rules>
</rewrite>
<staticContent>
<remove fileExtension=".eot" />
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
<remove fileExtension=".ttf" />
<mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
<remove fileExtension=".svg" />
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
<remove fileExtension=".woff" />
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
<remove fileExtension=".woff2" />
<mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
<remove fileExtension=".json" />
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
</system.webServer>
</configuration>

Related

Gzip file decompress with web.config (Uncaught SyntaxError: Invalid or unexpected token)

I have compressed my react files with webpack's CompressionPlugin with gz format. Also I added following config in web.config for reading gz files in IIS:
<system.webServer>
<staticContent>
<remove fileExtension=".js.gz" />
<remove fileExtension=".css.gz" />
<remove fileExtension=".png.gz" />
<remove fileExtension=".jpg.gz" />
<remove fileExtension=".gif.gz" />
<remove fileExtension=".svg.gz" />
<remove fileExtension=".html.gz" />
<remove fileExtension=".json.gz" />
<mimeMap fileExtension=".js.gz" mimeType="application/javascript" />
<mimeMap fileExtension=".css.gz" mimeType="text/css" />
<mimeMap fileExtension=".png.gz" mimeType="image/png" />
<mimeMap fileExtension=".jpg.gz" mimeType="image/jpeg" />
<mimeMap fileExtension=".gif.gz" mimeType="image/gif" />
<mimeMap fileExtension=".svg.gz" mimeType="image/svg+xml" />
<mimeMap fileExtension=".html.gz" mimeType="text/html" />
<mimeMap fileExtension=".json.gz" mimeType="application/json" />
<!--<mimeMap fileExtension=".woff2" mimeType="font/woff2" />-->
</staticContent>
<rewrite>
<outboundRules rewriteBeforeCache="true">
<rule name="Custom gzip file header">
<match serverVariable="RESPONSE_CONTENT_ENCODING" pattern=".*" />
<conditions>
<add input="{REQUEST_URI}" pattern="\.gz$" />
</conditions>
<action type="Rewrite" value="gzip"/>
</rule>
</outboundRules>
<rules>
<rule name="Rewrite gzip file">
<match url="(.*)"/>
<conditions>
<add input="{HTTP_ACCEPT_ENCODING}" pattern="gzip" />
<add input="{REQUEST_FILENAME}.gz" matchType="IsFile" />
</conditions>
<action type="Rewrite" url="{R:1}.gz" />
</rule>
</rules>
</rewrite>
</system.webServer>
Unfortunalety sometimes when I clear cache with ctrl + f5 in console I get:
Uncaught SyntaxError: Invalid or unexpected token : main.js.gz
Also here's the picture of Sources part of google chrome's developer tools:
Does anyone know that where is the problem?
Thank you in advance.

Gatsby site hosted on Microsoft IIS server giving 404 errors for static assets and other files

I am trying to host a Gatsby site on a remote Microsoft IIS server. I have copied the contents of the public folder of Gatsby to the folder of the IIS server. The site works but all my images in the static folder, web manifest file and some other files being referenced are not found. I have a lot of 404 errors in my console. How do I fix this?
Thank you.
Have you installed the IIS URL Rewrite?
It’s required to define the outboundRules in the web.config, that should look like:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<location path="static">
<system.webServer>
<httpProtocol>
<customHeaders>
<remove name="cache-control" />
<add name="cache-control" value="public, max-age=31536000, immutable" />
</customHeaders>
</httpProtocol>
</system.webServer>
</location>
<location path="page-data">
<system.webServer>
<httpProtocol>
<customHeaders>
<remove name="cache-control" />
<add name="cache-control" value="public, max-age=0, must-revalidate" />
</customHeaders>
</httpProtocol>
</system.webServer>
</location>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".webmanifest" mimeType="application/manifest+json" />
</staticContent>
<rewrite>
<outboundRules>
<rule name="AdjustCacheForDontCacheFiles" preCondition="IsDontCacheFile" stopProcessing="true">
<match serverVariable="RESPONSE_Cache-Control" pattern=".*" />
<action type="Rewrite" value="public, max-age=0, must-revalidate" />
</rule>
<rule name="AdjustCacheForCachePermanentlyFiles" preCondition="IsCachePermanentlyFile" stopProcessing="true">
<match serverVariable="RESPONSE_Cache-Control" pattern=".*" />
<action type="Rewrite" value="public, max-age=31536000, immutable" />
</rule>
<preConditions>
<preCondition name="IsDontCacheFile">
<add input="{REQUEST_FILENAME}" pattern="(.*\.html)|(sw\.js)|(app\-data\.json)|(page\-data\.json)" />
</preCondition>
<preCondition name="IsCachePermanentlyFile">
<add input="{REQUEST_FILENAME}" pattern="((.*\.js)|(.*\.css))$" />
</preCondition>
</preConditions>
</outboundRules>
</rewrite>
</system.webServer>
</configuration>
Check Deploying to Microsoft Internet Information Server (IIS) for further details.
To me it looks like redirection issues that results in 404 error.
I was finally able to solve it by add the MIME types of .webmanifest and .webp to the web.config file:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<location path="static">
<system.webServer>
<httpProtocol>
<customHeaders>
<remove name="cache-control" />
<add name="cache-control" value="public, max-age=31536000, immutable" />
</customHeaders>
</httpProtocol>
</system.webServer>
</location>
<location path="page-data">
<system.webServer>
<httpProtocol>
<customHeaders>
<remove name="cache-control" />
<add name="cache-control" value="public, max-age=0, must-revalidate" />
</customHeaders>
</httpProtocol>
</system.webServer>
</location>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".webmanifest" mimeType="application/manifest+json" />
<mimeMap fileExtension=".webp" mimeType="image/webp" />
</staticContent>
<rewrite>
<outboundRules>
<rule name="AdjustCacheForDontCacheFiles" preCondition="IsDontCacheFile" stopProcessing="true">
<match serverVariable="RESPONSE_Cache-Control" pattern=".*" />
<action type="Rewrite" value="public, max-age=0, must-revalidate" />
</rule>
<rule name="AdjustCacheForCachePermanentlyFiles" preCondition="IsCachePermanentlyFile" stopProcessing="true">
<match serverVariable="RESPONSE_Cache-Control" pattern=".*" />
<action type="Rewrite" value="public, max-age=31536000, immutable" />
</rule>
<preConditions>
<preCondition name="IsDontCacheFile">
<add input="{REQUEST_FILENAME}" pattern="(.*\.html)|(sw\.js)|(app\-data\.json)|(page\-data\.json)" />
</preCondition>
<preCondition name="IsCachePermanentlyFile">
<add input="{REQUEST_FILENAME}" pattern="((.*\.js)|(.*\.css))$" />
</preCondition>
</preConditions>
</outboundRules>
</rewrite>
</system.webServer>
</configuration>

Hosting a React site in the same folder as a WCF Service

I've got an existing WCF service set up on a shared Windows host through GoDaddy, and I'm looking to upload a react app to the same hosting to consume the service.
So, for example, I have the service set up at https://example.com/Service1.svc/ and when you enter https://example.com I want the react app to be visible, and still able to access the service via the existing url.
I'm not sure how to configure my web.config to fulfil this requirement. Navigating to the root domain will give me a 404 error, as will attempting to navigate to index.html, despite the file existing. If I clear out my web.config, the react site will work correctly, but obviously the service no longer works.
Below is my web config:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.web>
<trust level="Full" originUrl="" />
<compilation debug="true" targetFramework="4.0" />
</system.web>
<system.web.extensions>
<scripting>
<webServices>
<jsonSerialization maxJsonLength="50000000" />
</webServices>
</scripting>
</system.web.extensions>
<system.serviceModel>
<services>
<service name="MyService.Service1" behaviorConfiguration="web">
<endpoint address="" behaviorConfiguration="web" binding="webHttpBinding" bindingConfiguration="httpBinding"
contract="MyService.IService1" />
<endpoint address="" behaviorConfiguration="web" binding="webHttpBinding" bindingConfiguration="httpsBinding"
contract="MyService.IService1" />
</service>
</services>
<behaviors>
<serviceBehaviors>
<behavior name="web">
<serviceMetadata httpGetEnabled="false" />
</behavior>
</serviceBehaviors>
<endpointBehaviors>
<behavior name="web">
<webHttp helpEnabled="true" defaultBodyStyle="Bare" faultExceptionEnabled="true"
automaticFormatSelectionEnabled="true" />
</behavior>
</endpointBehaviors>
</behaviors>
<serviceHostingEnvironment multipleSiteBindingsEnabled="true" aspNetCompatibilityEnabled="true" />
<bindings>
<webHttpBinding>
<binding name="httpBinding">
<security mode="None" />
</binding>
<binding name="httpsBinding">
<security mode="Transport" />
</binding>
</webHttpBinding>
</bindings>
</system.serviceModel>
<system.webServer>
<modules runAllManagedModulesForAllRequests="true" />
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
</customHeaders>
</httpProtocol>
<staticContent>
<clear />
<mimeMap fileExtension="." mimeType="*/*" />
<mimeMap fileExtension=".txt" mimeType="*/*" />
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
</system.webServer>
</configuration>
Alternatively, I have found that I can put the service in a subfolder and configure a virtual directory so that it works there, however that changes the URL of the service to http://example.com/subfolder/Service1.svc which is undesirable at this stage. Is there any way I can have the original URL somehow point to the service in the subfolder somehow?
Any help would be appreciated.
I think I figured it out. At first, I thought it was something to do with some configuration in the service blocking everything else, and as it turns out I was almost right, except it had nothing to do with the service itself and everything to do with this section of the web.config:
<staticContent>
<clear />
<mimeMap fileExtension="." mimeType="*/*" />
<mimeMap fileExtension=".txt" mimeType="*/*" />
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
Specifically, that <clear /> line clears out the existing content handlers, so the server couldn't even serve the HTML and js files that make up the react site.

Moved CakePHP to Azure App Service, rewrites aren't working

Copied my CakePHP v2.2 app from a linux server to Azure App Service for dev/testing. I get that .htaccess won't work, so I've added a web.config in each folder \ & \app\ & \app\webroot\. The root of the site works, the home page loads, reads data form SQL, the CSS and JS loads. CSS files are hosted in \app\webroot\css, but accessed via example.com\css\file.css, so I assume some sort of rewrite is working.
The issue is when going to a page, i.e. example.com/about, I get the error The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.
I've seen most if not all posts on here about hosting this on IIS, and again I think my web.configs are there. What am I missing?
web.config in \
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="rule1A" stopProcessing="true">
<match url="^$" />
<action type="Rewrite" url="app/webroot/" />
</rule>
<rule name="rule2A" stopProcessing="true">
<match url="(.*)" ignoreCase="false" />
<action type="Rewrite" url="app/webroot/{R:1}" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
web.config in \app\
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.web>
<customErrors mode="Off"/>
</system.web>
<system.webServer>
<rewrite>
<rules>
<rule name="rule 1A" stopProcessing="true">
<match url="^$" />
<action type="Rewrite" url="webroot/" />
</rule>
<rule name="rule 2A" stopProcessing="true">
<match url="(.*)" />
<action type="Rewrite" url="webroot/{R:1}" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
web.config in \app\webroot\
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="CakePHP" stopProcessing="true">
<match url="^(.*)$" ignoreCase="true" />
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
</conditions>
<action type="Rewrite" url="index.php" appendQueryString="true" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
Fixed it! Found this article again, and updated just the web.config at \ and removed the web.configs from the other two locations. Works like a charm!
https://book.cakephp.org/2.0/en/installation/url-rewriting.html#url-rewrites-on-iis7-windows-hosts
web.config in \
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Rewrite requests to test.php"
stopProcessing="true">
<match url="^test.php(.*)$" ignoreCase="false" />
<action type="Rewrite" url="app/webroot/test.php{R:1}" />
</rule>
<rule name="Exclude direct access to app/webroot/*"
stopProcessing="true">
<match url="^app/webroot/(.*)$" ignoreCase="false" />
<action type="None" />
</rule>
<rule name="Rewrite routed access to assets(img, css, files, js, favicon)"
stopProcessing="true">
<match url="^(img|css|files|js|favicon.ico)(.*)$" />
<action type="Rewrite" url="app/webroot/{R:1}{R:2}"
appendQueryString="false" />
</rule>
<rule name="Rewrite requested file/folder to index.php"
stopProcessing="true">
<match url="^(.*)$" ignoreCase="false" />
<action type="Rewrite" url="index.php"
appendQueryString="true" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>

AngularJS HTML5 Mode URL Rewrite to www. Version

I am hosting my AngularJS site in Azure, but running into issues when I only want to perform a URL rewrite to the www. version. I am using HTML5 mode for routing.
If I have the following web.config and refresh the page I get an error stating "The resource you are looking for has been removed, had its name changed, or is temporarily unavailable."
<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<clear/>
<rule name="WWW Rewrite" enabled="true">
<match url="(.*)"/>
<conditions>
<add input="{HTTP_HOST}" negate="true" pattern="^www\."/>
</conditions>
<action type="Redirect" url="http://www.{HTTP_HOST}/{R:0}" appendQueryString="true" redirectType="Permanent"/>
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
If I leave my web.config as follows, I have no issues with refreshing, but I can't redirect to the www. version of my site:
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.5" />
<httpRuntime targetFramework="4.5" />
</system.web>
<system.webServer>
<rewrite>
<rules>
<rule name="Main Rule" 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>
How can I have both scenarios working together?
Try adding
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
to your conditions block.

Resources