Is it possible to open an vuejs subroute from an external page with nginx? E.G
https://www.vuejsapp.com/subroute/param123
My current result is redirect to the nginx 404 page.
Thanks for help,
best regards and stay healthy!
Vuejs router uses html5 pushstate for routing, which happens only in client side it means when a route changes it has nothing to do with server side and when external request comes to vue, first goes to server side and sees there is not path matching url and returns 404 so the only thing you should do is to rewrite all http requests to index.html file in that case server side will send all requests to index.html and then vue js will handle routing and finally your component will be mounted.
if your web server is apache you should do this (rewriting all requests to index.html) in .htaccess file
Related
I use the latest recommended SPA + .Net Core-based Web APi pattern where the FE referenced to BE, FE serves proxy to BE during development, and app.UseDefaultFiles()serves index.html where the SPA resides during production. This pattern means no proxy middleware is required as it was in opposite direction when the BE serves FE as a proxy.
app.UseDefaultFiles(); <-- Here the site is loaded first time
app.UseStaticFiles();
app.MapControllers();
app.MapFallbackToFile("/index.html"); <-- Here the site is reloaded if URL typed(changed) manually
Client-side routing is the point. Specifically, I use Vue Router and IIS hosting. When the site is already opened, and a user types URL in the browser, it falls down to app.MapFallbackToFile("/index.html") and then Vue router handles the route.
The problem is that the site is always completely reloading when the URL is just changed (let say from mysite.com/a to mysite.com/b) in this scenario, as I would press F5. It's not always necessarily bad but I would like to control it.
The question is: how to get rid of app.MapFallbackToFile("/index.html") and somehow pass the captured URL to the SPA, as it would be naked SPA without backend which now stays in front of frontend.
If have tried Vue Spa with ASP.NET Core 6 minimal setup and it seems for me, that there is no way to achieve what you want.
When user enters or changes the URL address, the browser navigate away from the page and do a GET request to BE (Backend).
Here is the catch-all fallback route required, otherwise the user gets the 404 error from the web server.
I presume you use the HTML5 History Mode. Here is a part from the Vue Router Docs about this problem.
Since our app is a single page client side app, without a proper
server configuration, the users will get a 404 error if they access
https://example.com/user/id directly in their browser. Now that's
ugly.
Not to worry: To fix the issue, all you need to do is add a simple
catch-all fallback route to your server. If the URL doesn't match any
static assets, it should serve the same index.html page that your app
lives in. Beautiful, again!
If somebody yet knows the solution, please post a new answer.
It would be great to know how to do it!
I have 2 domains that is mapped to a single NuxtJS STatic Generated app. domain1.com should be just normal. But I want domain2.com to only show domain1.com/chat/ page on its every single URL may it be homepage or /h/ and /n/.
I already put a URL Rewrite on the desired folder location like /chat/. When I vist domain2.com the URL rewrite takes effect and renders the /chat/index.html, but immediately after the rewrite takes effect the router will also take effect then brings me to the homepage.
Is there a way to solve this? I am using IIS URL Rewrite in a Microsoft 2012 server by the way
I have a blazor server-side app hosted on IIS behind a reverse proxy (using ARR).
I have tried everything I can think of, but I keep getting 404 on
_framework/blazor.server.js
My base href is is set to "/subsite/":
<base href="/subsite/" />
and all my src values are relative like this:
<script src="_framework/blazor.server.js"></script>
<script src="_content/BlazorInputFile/inputfile.js"></script>
<script src="animations.js"></script>
Every other script ref loads fine, EVEN the _content data, but not the blazor.server.js.
I tried the old PathBase trick for MVC apps as well with no success:
if (!env.IsDevelopment()) {
app.Use((context, next) => {
context.Request.PathBase = new PathString("/subsite");
return next();
});
}
Can anyone tell me how to make Blazor realize where to put the blazor.server.js in a reverse proxy scenario?
Did you try the UsePathBase ?
app.UsePathBase("/subsite");
Here is my test result
Please check this article for more
https://www.billbogaiv.com/posts/net-core-hosted-on-subdirectories-in-nginx
From docs.
Rewrite URLs for correct routing
Routing requests for page components in a Blazor WebAssembly app isn't as straightforward as routing requests in a Blazor Server, hosted app. Consider a Blazor WebAssembly app with two components:
Main.razor – Loads at the root of the app and contains a link to the About component (href="About").
About.razor – About component.
When the app's default document is requested using the browser's address
bar (for example, https://www.contoso.com/):
The browser makes a request.
The default page is returned, which is usually index.html.
index.html bootstraps the app.
Blazor's router loads, and the Razor Main component is rendered.
In the Main page, selecting the link to the About component works on the client because the Blazor router stops the browser from making a request on the Internet to www.contoso.com for About and serves the rendered About component itself. All of the requests for internal endpoints within the Blazor WebAssembly app work the same way: Requests don't trigger browser-based requests to server-hosted resources on the Internet. The router handles the requests internally.
If a request is made using the browser's address bar for www.contoso.com/About, the request fails. No such resource exists on the app's Internet host, so a 404 - Not Found response is returned.
Because browsers make requests to Internet-based hosts for client-side pages, web servers and hosting services must rewrite all requests for resources not physically on the server to the index.html page. When index.html is returned, the app's Blazor router takes over and responds with the correct resource.
When deploying to an IIS server, you can use the URL Rewrite Module with the app's published web.config file. For more information, see the IIS section.
Maybe you could try to enable the forward proxy in IIS manager->server node->application request routing cache->proxy->enable.
If you only have one website, you could just add the website to ARR server farm and then it will create the routing rule automatically. It will be convenient to monitor the back-end server with health check.
Is this ARR warning causing my 404?
I am about to deploy a React app using react-router in our intranet. I am using Kestrel without a reverse proxy.
When I start browsing the site by typing https://myserver/, the page gets served and I can click links which take me to https://myserver/subpage, but subpage does not exist inside wwwroot, only react-router uses this to determine the contents to display. Now if the user presses the browser's reload button, a 404 is returned.
Should I configure Kestrel to serve index.html in case the requested resource is not found? If so, yes? Or is there a more elegant solution?
When using history mode in vue-router the documentation is suggesting a pretty dodgy way to get around some of the limitations it has.It suggests a server-side configuration that catches all URLs that could be a client-side route and rewriting to root (/) so the client-side app is delivered. And then another catch-all route to a 404 component in the client-side router if no routes match.
Problem is, this will mean your server is returning 200 OK status codes to crawlers/indexers for basically every URL, specifically ones that don’t technically exist.
My thoughts so far:
Use IIS <rewriteMap> to list the valid client-side route patterns I have and use that for matches instead of a catch-all on everything not a file/dir.
Problem: pain to manage in tandem with client-side routes.
Routes defined in server config and handed to client-side router via an api endpoint for registration
Problem: setting up an API when you just want to host a static app is a pain.
Any other suggestions?