So I have a static website hosted on s3. I set it up to work with AWS certificate manager, route 53, and cloud front so that the site can be accessed with https.
It seems to be sort of working after a lot of fiddling but it then breaks super weirdly.
For example I can go to the following no problem:
www.myurl.com https://www.myurl.com/ https://myurl.com/ http://myurl.com/ Great! But then I click a link on this homepage to take me to another page named login.html but this ONLY works for a few of the above links. For example if I go to https://myurl.com and click the link I successfully navigate to https://myurl.com/login.html.
However if I go to https://www.myurl.com/ and click the same link it just keeps loading and never brings up the page.
There are some other weird things going on with other pages but I imagine they are related to this issue and I can't figure it out at all. Why is it working but only sort of and sporadically and only with certain url structures?
Edit: So the login.html started actually loading from https://www.myurl.com when the button was clicked but the display of the login.html is all fucked up and looks all over the place/messed up. Still works fine from https://myurl.com though.
Another clue: I just realized when i go to my site via the cloud front url/domain it is all messed up layout wise as well - interesting...
Update: I messed around with a few things - seems I fixed some of the linking issues and the remaining problem is almost certainly to do with angularJS and its interactions with cloud front. The following error message is in my console and I suspect it may be a clue as to the problem.
angular.min.js:107 ReferenceError: people is not defined at eval (eval at <anonymous> (jquery.js:2), <anonymous>:4:29) at eval (<anonymous>) at jquery.js:2 at Function.globalEval (jquery.js:2) at m.fn.init.domManip (jquery.js:3) at m.fn.init.after (jquery.js:3) at b (angular.min.js:188) at Object.enter (angular.min.js:189) at angular.min.js:283 at angular.min.js:54 1 Answers
Answers 1
It seems like your issue is directly tied to the explicit www prefix in your domain, and is something you can reproduce easily.
To me your problem is coming from the fact there is a restriction/csp policy over your api or another ressource (seems like the people is somethings that is fetched) and only the domaine without www is allowed to access it, thus the error only being present on the www version.
You could try to find the blocking rule, but my advice would be instead to "get rid" of the www domain. The general convention is that you don't want your users to browse your website on different urls, rather put a redirect from the prefixed domain to the non-prefixed one. This way users will always use the same links, it prevent duplication of content which is bad for SEO and is less painful for SSL certificates.
There is a good article about how to put a redirect in place with a static S3 website, basically you need to create a new bucket with the same name of your www origin, go the bucket Properties, Static Website Hosting section and redirect all requests to another hostname. The article explains more deeply how to configure it for https domains that I won't expand here, but I invite you to consult it.
0 comments:
Post a Comment