as mentioned in the title, I’m currently trying to develop a single page application with vuejs(front end) and tornado(backend). The front end is basically one small index.html file that runs a giant JavaScript file that also includes client side routing.
The problem I have is with StaticFileHandler, which I’m currently using to serve my index.html file. Every time the URL is changed from the browser, there is always a split second that it shows index.html before the client routes it to the correct URL.
I’m wondering if there is a better way to handle this so that the URL is updated once by the front end client instead of going through the redirection.
I’m still quite new to tornado and any help would be appreciated.
Related
I'm having the SSL warning messages all over my website after switching to SSL for several assets:
Mixed Content: The page at 'https://example.com' was loaded over HTTPS,
but requested an insecure script 'http://example.com/script.js'. This
request has been blocked; the content must be served over HTTPS.
I checked the page source, every single script/css is requested over https.
I even checked the dynamically created html by using the code inspector.
I disabled Javascript in case a script was loading these assets dynamically.
None of these things showed a single http:// request. I'm out of ideas to try and find what is causing this. Any ideas or suggestions?
When seeing a mixed-content message about a http://example.com/script.js (non-https) URL that doesn’t actually appear anywhere in your sources, the basic strategy to follow is:
Replace the http in the URL with https and put that into the address bar in your browser: https://example.com/script.js
If your browser redirects from that https://example.com/script.js URL back to (non-https) http://example.com/script.js, then you’ve found the cause: example.com/script.js isn’t actually available from an https URL, and ends up getting served from a http URL even though your source is requesting the https URL.
My 2 cents regarding this issue.
I have a project hosted on one domain that works flawlessly.
I need to make it international so I am cloning the master branch to a new branch, making some necessary text changes and deploying new site (new domain) with code from the new branch.
Everything works fine, except 1 ajax call (api route) that gets blocked due to Mixed content.
First things first, I checked these 3 things:
I check in the Network tab in dev tools and it is actually loaded through https.
I open the file directly in browser and it is https.
I try to open it as http:// and it automatically redirects to https://
This is very strange because the 2 domains are both using Cloudflare and their backend setup is identical, the code is the same (only text changes for the new one) yet for the new setup there is console error for 1 specific api route, an all others (some 20+ ajax requests across the page) work just fine. They are even using the same function to make the Ajax request, so it is definitely not a configuration error.
After doing some investigation I found out the issue:
The call that was 'buggy' was ending in /. For example, all other calls were made to:
https://example.com/api/posts
https://example.com/api/users
And this particular one was making requests to
https://example.com/api/todos/
The slash at the end was making it fail with mixed content issue. I am not sure why this is causing issue and how it isn't an issue on the original site (since there the same ajax call works just fine), but it definitely fixed my issue.
If I figure out what caused the / to fail so miserably, I will post an update.
I am using React and React Router in my single page web application. Since I'm doing client side rendering, I'd like to serve all of my static files (HTML, CSS, JS) with a CDN. I'm using Amazon S3 to host the files and Amazon CloudFront as the CDN.
When the user requests /css/styles.css, the file exists so S3 serves it.
When the user requests /foo/bar, this is a dynamic URL so S3 adds a hashbang: /#!/foo/bar. This will serve index.html. On my client side I remove the hashbang so my URLs are pretty.
This all works great for 100% of my users.
All static files are served through a CDN
A dynamic URL will be routed to /#!/{...} which serves index.html (my single page application)
My client side removes the hashbang so the URLs are pretty again
The problem
The problem is that Google won't crawl my website. Here's why:
Google requests /
They see a bunch of links, e.g. to /foo/bar
Google requests /foo/bar
They get redirected to /#!/foo/bar (302 Found)
They remove the hashbang and request /
Why is the hashbang being removed? My app works great for 100% of my users so why do I need to redesign it in such a way just to get Google to crawl it properly? It's 2016, just follow the hashbang...
</rant>
Am I doing something wrong? Is there a better way to get S3 to serve index.html when it doesn't recognize the path?
Setting up a node server to handle these paths isn't the correct solution because that defeats the entire purpose of having a CDN.
In this thread Michael Jackson, top contributor to React Router, says "Thankfully hashbang is no longer in widespread use." How would you change my set up to not use the hashbang?
You can also check out this trick. You need to setup cloudfront distribution and then alter 404 behaviour in "Error Pages" section of your distribution. That way you can again domain.com/foo/bar links :)
I know this has been a few months old, but for anyone that came across the same problem, you can simply specify "index.html" as the error document in S3. Error document property can be found under bucket Properties => static Website Hosting => Enable website hosting.
Please keep in mind that, taking this approach means you will be responsible for handling Http errors like 404 in your own application along with other http errors.
The Hash bang is not recommended when you want to make SEO friendly website, even if its indexed in Google, the page will display only a little and thin content.
The best way to do your website is by using the latest trend and techniques which is "Progressive web enhancement" search for it on Google and you will find many articles about it.
Mainly you should do a separate link for each page, and when the user clicks on any page he will be redirected to this page using any effect you want or even if it single page website.
In this case, Google will have a unique link for each page and the user will have the fancy effect and the great UX.
EX:
Contact Us
I really do not understand .htaccess files very well. I need some help. I have a AngularJS for my front end and Laravel for my back end. The Angular needs to communicate to the Laravel back end api for database stuff. But I want Angular to handle all of the front end stuff. Because of CORS and Cross-Domain issues I can't have them separate. So here is an example of my directory structure.
/mobile-app
- .htaccess
- /mobileFrontend
- /mobileBackend
I really need it so that any time someone visits www.domain.com/db that they are routed to the mobileBackend.
Anytime anyone goes to www.domain.com or anything like www.domain.com/xxxx that everything else will go to /mobileFrontend so that I can let the front end part of the site deal with all of the rest of the routing etc. Is this even possible to do?
I had Magento SOAP API working perfectly until the client said Doh! We need it on this url instead, after I moved it it to that new url API will not run no matter what, I've made all the necessary url changes in the API script, Configuration, the DB and the site files.
Is there somewhere the old url may be encoded where I'm not finding it using a find and replace?
For instance, I created a full cPanel back up of the site, restored it to another server, whet back through and changed all the instances of the new url back to the old url in the db, site files and configuration and WHALA! SOAP starts working again..
Thanks!
i have angularjs app with html5mode enabled.
I have tried to run app in IE8 and it seems that URL is being prefixed with #! is it suppose to be - back button works etc..hashbang mode
I have tried to run app in modern browser and it seems that history api also work. All fine.
But if i hit http://localhost:3000/notes directly in address bar in both browsers i get routing error from webrick/rails app. I thought angular will take over of this request and handle it.
I have NOT setup anything on server side as angular guide say:
Using this mode requires URL rewriting on server side, basically you
have to rewrite all your links to entry point of your application
(e.g. index.html)
Is that why i am getting route error from webrick? And if i will able to setup rewriting rule how the hell it works? I thought if i rewrite something like http://localhost:3000/notes -> http://localhost:3000(index if u wish) the "/notes" - where i want to jump in is gone and angular app will never know where to route..
And if there is no way to tell webrick what and how to rewrite. How do you do in your development environment?
Thank you a lot.
You need to configure your server to return the same data for /notes as if it were the / route. Not a redirect (since that will remove notes). Basically you need a catchall route that returns if it doesn't match anything else. Either that or enumerate the known routes (i.e., /, /notes, /other, etc.), and have all of those return the same document. At that point, angular will detect the path and act accordingly.