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.
Related
I have a Pages Single-Page App (SPA) with a hello world function. I've got it working on Cloudflare servers. the '/' route works great. '/api/hello' my function works great and also '/about' which is resolved by my SPA router works fine.
However, when I proxy the tooling to run it locally using "npx wrangler pages dev -- npm start" and try '/about' I get a 404 error. Is this a bug in Wrangler? It seems it does not recognize this is an SPA and is either trying to find a function or a page. Any settings I'm missing?
Exact error:
Exact Error:
404 File Not Found
Url: /about
File: /Users/…/…/…/www/about
(using … to obfuscate exact directory names)
If I try mywebsite.com/NON-EXISTENT-PATH for my site on Google App Engine, I get a 404 response.
However using create-react-app's local development server for another app, if I try localhost:3000/NON-EXISTENT-PATH, it just gives me the response for localhost:3000, rather than a 404. This also applies to hosting the app on ZEIT Now. Why is this?
Create React App is auto-detected and a wildcard route is added so that any path that doesn’t match a static file will serve /index.html.
https://zeit.co/docs/v2/build-step#optimized-frameworks
This is necessary for frameworks that don't create HTML files for each page but instead create a single index.html file and use JavaScript to route on the frontend.
This pattern is typically called SPA.
Well in my application I have a link to download a report, the report is dynamically generated. During testing the generation happens in a test server, to which CRA normally correctly redirects for xhr requests.
The link is called like:
<a href={'/api/event/2/report/csv'} download={"report.csv"}>
Load CSV report
</a>
CRA runs on port 3000, and it should act as a transparent host for all request to /api - redirecting them to localhost:3000/api. For the xhr requests this works smoothly by using the default reverse proxy. In package.json:
{
"proxy": "http://localhost:1337"
}
However this doesn't work at all. When I test above link I get a failed no file error on chrome. If I remove the download parameter I get a 404 page.
If I manually link to http://localhost:1337/api/event/2/report/csv it works (given there's no cookie so I the code shows a permission denied, but that's expected).
How can I get cra to work with this?
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?
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');