I am hosting a single page application based in React in S3 and served up in a CloudFront distribution (AWS). Everything works fine in production and The CloudFront error handling is setup correctly like shown below:
I did this for 404 and 403 responses. When I attempt open a link to a non root path (e.g. /settings), it works fine in Chrome and Firefox. However, in Safari I get redirected to the root path. I don't know how to resolve this Safari specific issue, any help is appreciated, thank you.
Similar problem without an answer here Safari Issue with Single Page Application AngularJS in HTML5mode with AWS (Cloudfront/S3)
Related
I'm new in react app development, I just build my practice app and deployed it through Netlify. I can visit my app and everything is fine till I refresh my window. Refreshing the window comes with an error page not found. what should I do to solve this problem?
You may need to look at providing a _redirects file in your root directory. See https://docs.netlify.com/routing/redirects/
For example,
/* /index.html 200
As cra is single page application, you need server setting to redirect everytime to index.html,
You might want to check this link
https://www.netlify.com/blog/2020/04/07/creating-better-more-predictable-redirect-rules-for-spas/
I am running an AngularJS application in S3 and served up in a CloudFront distribution. I chose a CloudFront distribution for performance and the simplicity of installing the SSL certificate. The SPA is in HTML5mode to have a clean URL structure.
I configured html5Mode in my app.js file.
.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]).config(function($locationProvider){
$locationProvider.html5Mode(true);
})
In my index.html file I set the base tag as follows:
<base href="/" />
I have an S3 bucket serving up a static website, without any re-direct rules.
Lastly in my Cloudfront dashboard I set the error response as follows:
I did this for 404 and 403 responses. When I attempt open a link to a non root path (/pricing), it works fine in Chrome and Firefox. However, in Safari I get redirected to the root path. Apparently the hash in Safari and ios is not dropped if you are using https protocol.
I am not sure how to resolve the Safari specific issue. If anyone has any experience resolving this issue, I would appreciate some guidance.
I have a React app which is created by create-react-app command.
And I also have the blog system which is based on Wordpress.
Directory structure is like this.
*/index.html
/service-workder.js
/manifect.json
/index.html
/favicon.ico
/asset-manifest.json
/static/media
/js
/css
/blog <--------------------- Wordpress*
When I access the URL by http:mydomain/blog/,
Firefox show React page instead of Wordpress page.
Firefox even show React page for http:mydomain/blog/nonexisting ,
which I think is supposed to provide 404 not found from web server.
I was struggling to find a way NOT to let React take wildcard paths.
Safari use React only for index.html, which is good.
Chrome, Firefox use React for entire wildcard paths, even for not existing paths.
http://myserver/ ---> should show React app
http://myserver/nonexistence ---> should show 404 from server
Please help me to figure out isolate React app only for exact index.html.
Thanks in advance.
Like I wrote here, the root cause was service worker which seems to be HTML5 feature to make a web site to a web app.
Unregistering service worker was the solution.
I use data from localhost and REST API in my website. My website run properly on IE but in Chrome and Firefox CROS origin related problem occurs. I use Angular.js to create website. Please suggest how to solve these problem.
In Chrome above problem is solved by adding "allow cross origin *" extension.
I am working on a plugin for cakephp 2.1
all things are working fine on localhost on all browsers
But this plugin is not working on google chrome on server however it is working fine on Firefox
I am getting Error: The requested address '/login' was not found on this server when I submit the form.
For ex.
http://umpremium.ektasoftwares.com/login
Please check this on google chrome as well as Firefox. Can somebody help me out??
I can reach that site in both Google Chrome and Firefox, using Chrome 18.0.1025.151