I have a Polymer app running on port 5901 of my VM, and am using Apache reverse proxy to serve the app from the following URL:
http://www.example.com/polymer
The problem is when I go to the URL in a browser, I can see the page title but the page is blank. I also get this error in the console:
Failed to load resource: the server responded with a status of 404 (Not Found) src/home-page.html
I'm assuming that I have to somehow add the /polymer subdomain to the default URL for the app, but I'm not sure how to do this.
EDIT: In response to comment:
The relevant link for Polymer 2.0 routing is https://www.polymer-project.org/2.0/toolbox/routing .
Updating the route. The route object is read-write, so you can use two-way data binding or this.set to update the route. Both the route and routeData objects can be manipulated this way. For example:
this.set('route.path', '/search/');
Or:
this.set('routeData.user', 'mary');
Related
I have Vue website works correctlly on localhost ,after I build it and uploaded it on server ,the routes works fine but have two problems :
1- when I click on route and the page open ,then if i refresh the page it gives me an error 404 page not found.
2- the connect to api by axios don't work?
How can I solve them?
The problem is your web server. Make sure that your web server (Apache, Nginx, Express etc.) always points to the Index.html.
Your web server is not aware that the SPA should do the routing.
I'm attempting to use Keycloak for some future projects and it's still very new to me so I'm plugging away reading through the docs and searching for issues online but I'm currently stumped on one thing - I have a vuejs app I’ve added as a client (127.0.0.1:3001), I have a reverse proxy setup in IIS (idp.mc.local) and then a docker container on Windows with keycloak running (127.0.0.1:8080), when I attempt to login, instead of being redirected back to the vuejs client I am just getting redirected to the root of the reverse proxy with the state value in the url, as in the network logs in the screenshot below:
Network logs showing incorrected 'Location' redirect
If I don’t set a front end url for the realm and bypass the proxy / hook my vuejs client to login via Keycloak directly on 127.0.0.1:8080, it redirects to 127.0.0.1:3001/#state… correctly, as below:
Network logs showing correct 'Location' redirect
I can't spot any way to sort this issue, I thought the front end url for the realm should state the proxy address? I can't see why Keycloak would redirect to it at the end of the login process rather than to my client app url, the redirect_uri is being ignored by keycloak and for some reason taking me back to the root of my proxy domain. If I actually manually visit 127.0.0.1:3001/#state… with the state value copied in from the incorrect redirect, I log in successfully.
It's baffling me and any help would be appreciated!
The answer did turn out to be an IIS related issue with the setup of Application Request Routing / ARR being the problem. What was needed was to edit the settings for IIS Application Request Routing and uncheck the option:
Reverse rewrite host in response headers as can be seen in the image below:
IIS ARR Checkbox to untick
Hopefully this will be helpful for someone else who might have the same issue at some point!
I'm trying to use nginx to serve a custom error page using the Error Page middleware so that 404 requests to a lambda service (which I don't control) can be handled with a custom error page. I want to be able to get the context of this original request on that error page, either in Nginx for further forwarding, or else as a header for further handling e.g. in PHP or whatnot so I can provide contextual links on the 404 page.
However, right now after the redirection to Nginx in Traefik's ErrorPage middleware it seems the request has lost all the headers and data from the original service query.
The relevant part of my dockerfile:
traefik.port=8080
traefik.protocol=http
traefik.docker.network=proxy
traefik.frontend.rule=PathPrefix:/myservice;ReplacePathRegex:^/myservice/(.*) /newprefix/$$1
traefik.frontend.errors.myservice.status=404
traefik.frontend.errors.myservice.service=nginx
traefik.frontend.errors.myservice.query=/myservice-{status}
Nginx receives the forwarded 404 request, but the request URI comes through as nothing more than the path /myservice-404 specified in query (or /, if I omit traefik.frontend.errors.myservice.query). After the ReplacePathRegex I have the path of the original request available in the HTTP_X_REPLACED_PATH header, but any query arguments are no longer accessible in any header, and nginx can't see anything else about the original URI. For example, if I requested mysite.com/myservice/some/subpath?with=parameters, the HTTP_X_REPLACED_PATH header will show /myservice/some/subpath but not include the parameters.
Is it possible in Traefik to pass another service the complete context about the original request?
What I'm really looking for is something like try_files, where I could say "if this traefik request fails, try this other path instead", but I'd settle for being able to access the original, full request arguments within the handling backend server. If there was a way to send Nginx a request with the full path and query received by Traefik, that would be ideal.
tl;dr:
I am routing a request to a specific service in Traefik
If that request 404s, I want to be able to pass that request to Nginx for further processing / a contextual error page
I want Nginx and/or the page which receives the ErrorPage redirect to be able to know about the request that 404'd in the service
Unfortunately this is not possible with Traefik. I tried to achieve something similar but I realized that the only information that we are able to pass to the error page is the HTTP code, that's it.
The only options available are mentioned in their docs: https://doc.traefik.io/traefik/middlewares/errorpages/
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
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?