Pay attention to the following examples.
subdomain1.sample.com => target.sample.com/1001
subdomain1.sample.com/order => target.sample.com/1001/order
subdomain1.sample.com/login => target.sample.com/1001/login
subdomain2.sample.com => target.sample.com/1002
subdomain2.sample.com/order => target.sample.com/1002/order
subdomain2.sample.com/login => target.sample.com/1002/login
A reactjs project is running on target.sample.com, which is as follows
/ ==> page not found
/:id ==> home
/:id/login ==> page login
/:id/order ==> page order
We want to do this in IIS with the help of proxy reverse or rewrite.
Below are the settings of the web.config file related to the subdomain1.sample.com address
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="http_to_https" stopProcessing="true">
<match url="(.*)" />
<conditions>
<add input="{HTTPS}" pattern="^OFF$" />
</conditions>
<action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" appendQueryString="false" />
</rule>
<rule name="proxy" stopProcessing="true">
<match url="(.*)" />
<action type="Rewrite" url="https://target.sample.com/1001/{R:1}" />
</rule>
</rules>
<outboundRules>
<rule name="ReverseProxyOutboundRule1" preCondition="ResponseIsHtml1">
<match filterByTags="A, Form, Img" pattern="^https://target.sample.com/1001/(.*)" />
<action type="Rewrite" value="https://subdomain1.sample.com/{R:1}" />
</rule>
<preConditions>
<preCondition name="ResponseIsHtml1">
<add input="{RESPONSE_CONTENT_TYPE}" pattern="^text/html" />
</preCondition>
</preConditions>
</outboundRules>
</rewrite>
<httpErrors errorMode="Custom" existingResponse="Replace">
<remove statusCode="404" subStatusCode="-1" />
<error statusCode="404" path="https://{HTTP_HOST}{REQUEST_URI}" responseMode="ExecuteURL" />
</httpErrors>
</system.webServer>
</configuration>
such an error can be seen in the browser console
Uncaught SyntaxError: Unexpected token '<' (at main.697bcedd.js:1:1)
Have I gone the wrong way? How can I solve this problem?
Related
I really need your help and advice on this, I have been searching for 2 weeks and I'am unable to resolve my proxy issues.
I'm setting up the below 'setupProxy.js' to bypass the CORS while requesting the API/Endpoints from the (Web Servers).
However, the proxy and Origin replacement only works from localhost 3000 when using the terminal to run it. For some reasons, It doesn't work after deploying to IIS, it keep getting "404 Not Found". Could you please tell me what should I do to fix the issue here?
setupProxy.js:
app.use('/GCM.Order.API',
createProxyMiddleware({
target:'https://gcm.dellsvc',
secure: false,
changeOrigin: true
})
);
Axios call:
let gcmpapi =
"/GCM.Order.API/api/v1/orders/purchase-summary-with-details"
Terminal/Localhost:3000 result: (200 ok)
However, in IIS browse :8080 (http) : (404 Not Found)
web.config file:
<?xml version="1.0"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Rewrite Text Requests" stopProcessing="true">
<match url=".*" />
<conditions>
<add input="{HTTP_METHOD}" pattern="^GET$" />
<add input="{HTTP_ACCEPT}" pattern="^text/html" />
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
</conditions>
<action type="Rewrite" url="/index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
i had exactly the same problem i was dealing with for 2 weeks. Finally I have a satisfactory solution.
http-proxy-middleware or proxy in package.json is intended (in my opinion) for development purposes only.
What you have created is absolutely correct, but you can only use it in development.
For production settings, is only handled at the url rewrite level. And I think it's logical. It's separate from the code, and if there's an error in the code (eg a bad endpoint pointing to localhost), it won't affect production.
The solution is to modify the url rewrite in the web.config file, which is stored securely in IIS.
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Reverse Proxy to api" stopProcessing="true">
<match url="^api/(.*)" />
<action type="Rewrite" url="https://api.example.com/{R:0}" />
</rule>
<rule name="Reverse Proxy to pusher" stopProcessing="true">
<match url="^pusher/(.*)" />
<action type="Rewrite" url="https://pusher.example.com/{R:0}" />
</rule>
<rule name="React Routes" 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>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
In App.js component I was defined route like this:
<Route path="/item/:itemId" exact element={<Item />} />
But when I manually enter the URL in the browser like :
http://example.com/item/3
The browser shows me an error page:
404 - File or directory not found.
How can I fix the error?
Finally I got it.
According to this article, I should install the URL Rewrite module first. then
create a web.config beside project build files. and put these inside it :
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="ReactRouter Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
</conditions>
<action type="Rewrite" url="index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
So now my problems solved
If you are using router v6 there is not exact keyword
I tried publish my project on hosting, but I have some issues.
I have SPA (react) in same folder as .netCore(rest api).
I want SPA routing, thats why I set rule in web.config, but it is not working. When I remove handlers ("aspNetCore") section from config, it is works, but restApi doesnt.
Can anyone help me with web.config?
I just want routing with react and have working restapi on same domain myDomain.com/api.....
Thank you.
My web.config.
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<location path="." inheritInChildApplications="false">
<system.webServer>
<rewrite>
<rules>
<rule name="redirect all requests" stopProcessing="true">
<match url="^(.*)$" ignoreCase="false" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
</conditions>
<action type="Rewrite" url="index.html" appendQueryString="true" />
</rule>
</rules>
</rewrite>
<aspNetCore processPath=".\Horseedo.Api.exe" stdoutLogEnabled="true" stdoutLogFile=".\logs\stdout" hostingModel="inprocess" />
<handlers>
<add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
</handlers>
</system.webServer>
</location>
</configuration>
<!--ProjectGuid: 654874ba-ab44-4982-a101-ee05ba73cc4e-->
I am a newbie to React
I created a node app service in the Azure Portal using the Node JS Empty web App Starter web app.
When I go to the URL I see
Hello, world!
Which I note is in the contents of server.js
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end('Hello, world!');
}).listen(process.env.PORT || 8080);
I see that web.config refers to server.js
<configuration>
<system.webServer>
<handlers>
<!-- indicates that the app.js file is a node.js application to be handled by the iisnode module -->
<add name="iisnode" path="server.js" verb="*" modules="iisnode" />
</handlers>
<rewrite>
<rules>
<!-- Don't interfere with requests for logs -->
<rule name="LogFile" patternSyntax="ECMAScript" stopProcessing="true">
<match url="^[a-zA-Z0-9_\-]+\.js\.logs\/\d+\.txt$" />
</rule>
<!-- Don't interfere with requests for node-inspector debugging -->
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="^server.js\/debug[\/]?" />
</rule>
<!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
<rule name="StaticContent">
<action type="Rewrite" url="public{REQUEST_URI}" />
</rule>
<!-- All other URLs are mapped to the Node.js application entry point -->
<rule name="DynamicContent">
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True" />
</conditions>
<action type="Rewrite" url="server.js" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
When I deploy my static react website files to the site, I can see the files are there but the web site itself does not change when I go to the URL.
I think what I need is for the website to start src\app.js instead of server.js
How do I do that?
I tried replacing server.js with ./src/App.js but then the App.js just displays as text.
This Burke Holland shows how to set up the pipeline ( near the bottom)
And also links to this article by Tony Patrina that shows how to set up web.config.
As follows;
<?xml version="1.0"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="React Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
I am working on SPA application using Angularjs and .Net's web api. It all seems to work, in ability to refresh my pages I have added rules to my web.config file as follows and they all work except one, when I refresh detail page that has a parmeter, something like this http://domain/traveldetail/135. Please advise how should I approach this:
Web.config's rewrite section:
<rewrite>
<rules>
<rule name="TravelList" stopProcessing="true">
<match url="^travellist" />
<action type="Rewrite" url="/" />
</rule>
<rule name="TravelDetail" stopProcessing="true"> <!--NOT WORKING-->
<match url="^traveldetail/:travelId" />
<action type="Rewrite" url="/" />
</rule>
<rule name="AdvancedSearch" stopProcessing="true">
<match url="^advancedsearch" />
<action type="Rewrite" url="/" />
</rule>
<rule name="CreditCardMatcher" stopProcessing="true">
<match url="^creditcardmatcher" />
<action type="Rewrite" url="/" />
</rule>
<rule name="ApprovalGroups" stopProcessing="true">
<match url="^approvalgroups" />
<action type="Rewrite" url="/" />
</rule>
<rule name="Help" stopProcessing="true">
<match url="^help" />
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
It's not working because the :travelId in url="^traveldetail/:travelId" is the parameter notation for AngularJS and not a valid regular expression.
Change it for something like this: url="^traveldetail/(.+)", and it should work.