I have deployed a multi-page gatsby site both to AWS Amplify and Netlify.
When I go to a page that doesn't exist on my site that was deployed with Netlify, I get the 404 page I have created. But when I go to the same non-existent route on the site with Amplify, it redirects me to the root path.
I have checked the network tab, and I get a 404 status code without any HTTP redirects. So I assume the redirect happens in the JavaScript code?
Does this happen to anyone else?
Here is the default Rewrites and Redirects for my site on Amplify:
The solution was to change the target address from /index.html to /404.html like this:
I exprienced this same issue, but with all pages reloading to the homepage if they weren't ended with a '/'. Removing all the rewrite rules seemed to fix this for me. I wasn't using any of them and they were set as defaults. Such as 'www' rerouting to '/'.
Related
I have an angular app hosted on S3. When I try to directly go to a route like myapp.com/items I get a 403 forbidden error. But when I access the app from myapp.com everything is okay and from the app I can navigate to myapp.com/items. I don't understand why this is happening.
How can I make it so that routes like myapp.com/items can be accessed directly and not throw an error?
On CloudFront distribution enter error pages tab
Then create a new error response to deal with any othe routes and redirect it to index.html file
I followed this tutorial on how to host server side generated sites on Google Cloud Buckets. The issue I am having is that the nuxt app works fine when routing internally, but when I reload a route, the site is redirected to whatever route plus a /index.html at the end.
This causes things to break, as it conflicts with Nuxt routing. I set index to be my entry point ala
gsutil web set -m index.html -e 404.html gs://my-static-assets
but it seems to assume that to be the case always. I don't have this problem using Netlify.
According to the tutorial that you're doing, you're redirected to /route/index.html because of your MainPageSuffix index, this means that when you try to access for example https://example.com/route the service look for the target https:// example.com/route/index.html.
To fix this I suggest that you include an index.html file under the subdirectory in the subdirectory of the route.
I recommend, for further info on this to check this post which has a similar issue.
I have a Vue app that I deployed to was amplify. I noticed that if I click a route it loads but if I refresh that URL the page redirects to an index.html page. Please help if you can.
I solved the issue by going to the rewrite and redirect tabs of amplify and setting .
Since I was using history mode for vue, had to do a rewrite rule.
I set the source address to /<*> , target address to /index.html type to 404(rewrite)
1- try to add a default route at the end of you in your Vue-router to catch everything.
routes: [{ path: '/:pathMatch(.*)', component: main/index/whatever}],
2- add the following rule in your AWS amplify app Rewrites and redirects
/<*> / 200
I am using AWS codestar to deploy by react application using serverless nodejs template. This is the url that is given by codestar after successfully completion of all the stages https://xxxxx.execute-api.us-east-1.amazonaws.com/Prod . This url displayed all the components in my app correctly. In navbar of my app i have items like this a ,b,c. where clicking on each one of them will redirect to a new component.(i.e.https://xxxxx.execute-api.us-east-1.amazonaws.com/a,https://xxxxx.execute-api.us-east-1.amazonaws.com/b etc. But when i refresh the page which is having a url like this https://xxxxx.execute-api.us-east-1.amazonaws.com/b i am getting a error like {"message":"Forbidden"} and in my console it is showing like this favicon.ico:1 GET https://xxxx.execute-api.us-east-1.amazonaws.com/favicon.ico 403
It seems the chrome is fetching the favicon based on the https link, which fails because there is no such favicon at the location. I tried to remove favicon.ico link in index.html but even then the chrome is using the same url to fetch the favicon which eventually fails. I followed max number of suggestions in SO to acheive this but no luck. Is there any way to say api-gateway to exclude these favicon get requests and display my app rather than showing message forbidden.
And i am pretty sure that i had enabled logs for both the agi-gateway and lambda where i didnt find any forbidden errors(i.e.403) which is weird because i can see those 403 errors in my console.
Thanks
Any help is highly appreciated.
The https://xxxxx.execute-api.us-east-1.amazonaws.com/Prod url provided by API Gateway is the base url for your site, so those paths would have to be /Prod/a instead of /a.
One way to get around that is to register your own domain and connect it to API Gateway via a custom domain. That would allow you to have https://example.com as your base url, and your paths could stay /a, /b, etc.
I have an ember app that I have been building. It has several routes including index (/) and authorization (/authorization). My trouble is that when the application is hosted on hostgator, loading the url myapp.com/authorization results in a 404. This makes sense since there is nothing at that actual url. I need hostgator to redirect all non-file-specific urls to my index.html file.
An example in psuedo code:
if url has extension (.jpg, .pdf, etc)
serve requested url
else
serve index.html but retain url in the address bar
I've done this sort of thing with local instances of node when using AngularJs with ui-router, but this is my first time using History-API based routing served from HostGator.
Any suggestions on where to start to set this up?
Not much of an answer but you can use locationType: 'hash' in environment.js as your configuration.
With locationType set to 'auto', refreshing on application hosted on Hostgator will produce a 404. I have encountered this before and not found any solution. So I switched to 'hash'.
If you find any solution, please tell me. Thanks!