Cloudfront keeps redirecting me to index.html - javascript

I have a static website uploaded on S3 and recently I came to use Cloudfront as I wanted to serve it with https. Now my problem is that I have some js logic that based on the path, puts a "#" and scrolls around, but now for some reason it redirects me to mysite.com/index.html and breaks me the logic.
I would like how to avoid this behaviour, just as in localhost, with the base path "/" without any index.html at the end of it.
I've tried to set Default Root Object to "/" only but it seems to ignore it and keep redirecting, also I tried to invalidate it but nothing.
Also I have to say that I'm using 2 S3 buckets one with the "www" which redirects to the previously mentionated, for that reason I also created 2 cloudfront distributions.
Idk what im doing wrong but something has to be :S

You need to specify a default Root object with the object name.
example:
www.bucket1.tld/ (redirects to naked domain)
.bucket1.tld/index.html <---- you need to specify this as the default root object, not "/"
Your bucket can't find the default root object because "/" is a prefix, not an object. The redirect from www to naked domain is seperate from this and is working as intended.
Additionally - The bucket that is setup as the website is the one causing the "index.html" to be strapped to the back of your domain. This is because you've told S3 that the bucket is a website and that it needs to serve "index.html" as a default object.
Set your DRO to "index.html" in CloudFront.
Eric
Source: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/DefaultRootObject.html#DefaultRootObjectHowToDefine

Related

I keep having to change window.location.href depending on whether i'm developing on localhost or pushing to the server

I'm using google sign in and that's working. Once signed in I've got some code in app.js that opens a new webpage using:
window.location.href
But if I'm developing then the webpage is at:
localhost:3000/webpage.html
But then the URL changes when I push to the server.
Is there a way to use "or" so it will open on the localhost or on the server depending on where this is hosted?
The answer is: Use relative links.
Simply strip the host part from urls in your JavaScript file, like this:
From:
http://example.com/yourpage.htm
To:
/yourpage.htm
Now it will work, both locally and on your production server.
When you set 'location.href' to the relative url, the browser will add the current host name to the url.
Relative Paths
You might be asking about relative paths. A relative path doesn't contain the main domain, it only includes the path.
Instead of using:
localhost:3000/webpage.html
You could use: /webpage.html
Learn more about absolute vs. relative paths here
Google Sign In
Alternatively, if the question is about how to redirect to the public url (a .com address instead of localhost) when in production, take a look at this already answered question.

S3 web hosting for backbone.js application with pushState

I'm hosting a Backbone application on Amazon S3 using a custom domain name. The Backbone application router handles all routes under the root ('/'). I would like to use pushState, so there's no need for the # prefix on my application routes. Basically, i want all sub-routes to be routed by S3 to the domain root and let Backbone do the rest.
I added the following rule:
<RoutingRules>
<RoutingRule>
<Condition>
<HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals >
</Condition>
<Redirect>
<HostName>mydomain.com</HostName>
<ReplaceKeyPrefixWith>#</ReplaceKeyPrefixWith>
</Redirect>
</RoutingRule>
</RoutingRules>
But this just adds the # sign prefix to all my sub-routes. I want to avoid that.
How do I set the redirection rules on my S3 bucket to route everything to the indexed document without having to add the #?
You say "just adds the # sign" but what that does is actually load the index.html page. That is because www.example.com/#my-folder/my-page/whatever is actually loading /index.html and sending the browser the #my-folder/my-page/whatever as a fragment. You could do it if you ran the website on a server, but not in S3. You could use push-state once the page loads to read the fragment #my-folder/my-page/whatever and rewrite it to my-folder/my-page/whatever, and I believe that would achieve what you're looking for.

javascript get Path Name represented in "browser address bar"

Is there any way to get the requested path (the path displayed in the browser address bar) vs the redirected path for a subdomain (hidden from the user) using javascript
I am using a shared javascript file (shared across multiple pages and sites) that determines the controller and action (MVC) using window.location.pathname but... I have just caught myself out as my deployment runs under sub-domains which I wasn't representing in the Visual Studio dev environment. the sub-domains on my host redirect to a /subdomain folder as is usually the case but now my window.location.pathname pulls back /subdomain/controller/action whereas the URL in the address bar is /controller/action
Obviously I can tweak my javascript to handle this situation - however there may not always be a subdomain (at least in my dev environment if nothing else - and I am dead against solutions like having "isdev" style flags throughout my code) so I have to have a fail-over for those instances which means things start to get a little more complicated thus being more prone to error.
Any suggestions greatly appreciated.
Btw I do not want to use values from .Net e.g. HttpContext... as my js is in an external file and I do not want to create a dependency on data in a view for it to work as this means every time I consume the js on a new page I have to remember to include the additional logic in the view for it to work, plus if I change my js file it may result in me having to refactor a bunch of views as well.
Cheers
Rob
window.location.href should return the entire URL that the site is currently at, including the subdomain e.g. http://subdomain.site.com/path/to/page.aspx
Alternatively you can use window.location.host and it will return everything except for the path, or window.location.pathname to return just the relative path to the file.
See the MDC article on window.location for more information: https://developer.mozilla.org/en/DOM/window.location

Problem with forward slash "/" in jQuery AJAX

I always wrote URLs used by AJAX calls in this way: "/Home/Save" with the forward slash in the beginning. Now this last project is being deployed to a virtual directory on a server. Thus, these URLs aren't working anymore, because instead of "example.com/VirtualDir/Home/Save", they would point to "example.com/Home/Save" which is wrong. I quickly fixed the problem by removing the first forward slash "/" in all occurrences of URLs in my JavaScript. All pages work great, except for one! When AJAX call happens on the problematic page, the specified URL gets appended to the page URL. I've spent a few hours yesterday and the whole morning today, and I cannot figure it out. There is absolutely nothing different about this page comparing to others. Has anyone had this problem before? Should I post my code?
EDIT: After banging my head on the keyboard for another few hours, I ended up implementing the following. I got an action in a common Controller that returns the result of Request.Url.GetLeftPart(UriPartial.Authority), which is your http://www.mysite.com. I render it inside my Layout page into a global JavaScript variable, _AppPath. Then, every AJAX call gets its URL like this: _AppPath + '/Controller/Action'. This works everywhere and I still don't know what the hack is the problem with that page. Cheers!
Can you change the Ajax requests so that they instead point to "/VirtualDir/Home/Save"?
If it helps your code, you could have a path variable, so that you can easily update the virtual directory path (or remove it) when you deploy it somewhere else. Or your code could read its location via the window.location.href property and work out things out from there.
It's not so useful to have paths relative to the current document (i.e. without the / slash prefix) because, as you are observing, some of the pages will then fail their requests, when those pages are at a different point in the site hierarchy. An absolute URL would be the one to go for (i.e. with a / slash prefix).
[UPDATED, based on comments below]
#Dimskiy, it doesn't so much matter that the server-side framework is .NET MVC, or that there are no actual folders for those URLs on the server. The browser will just respond according to the URL structure it sees.
So the things to look for are the URLs in the browser address bar for the different pages, and the URLs of the Ajax requests being made to the server (e.g. look for these in Firebug's "Net" panel). And compare the URLs, looking at the number of folders suggested by each URL.
It doesn't matter if there isn't an actual folder on the server. The browser can't tell, it can only look at the URL structure. If the JavaScript is making a call from a page called "foo" to an Ajax resources at "Home/Save", then the request will be routed to "foo/Home/Save". And if the request is made from page "foo/bar" then it will be routed to "foo/bar/Home/Save". That's a relative path - it's relative to the containing HTML document.
A request to an "absolute" path, say, "/Home/Save" (note the / slash prefix) will always go to the root of the domain, e.g. example.com/Home/Save. But since you need your request to go to the "VirtualDir" virtual directory, then your URL will become "/VirtualDir/Home/Save".

JS Ajax: local vs absolute path issue when using SEO friendly urls

here's the thing:
i built my site with SEO friendly urls...but i have problem now calling ajax files becaus eth epath is wrong and I cant set an absolute url when i call my files in background..
for instance my page is here (similar to StackOverflow..)
www.domain.com/product/123/this-is-a-product
but my javascripts functions, in folder /js,now they try to reach the files but they cant obvisouly because are set to relative path...
how can i solve this issue??
EDIT: Found this How to get the root path in JavaScript?
When you are using freindly urls, then you have to use path started with /. But then you are starting path from main path.

Categories

Resources