SecurityError When Ember Application Deployed to Multiple Buckets - ember.js

I have my index.html document deployed to a www.lorem.io bucket and the rest of my assets deployed to a cdn.lorem.io bucket. Both of these buckets have their own Cloudfront distributions. When visiting https://www.lorem.io/ I'm receiving the following error:
Uncaught SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL 'https://cdn.lorem.io/' cannot be created in a document with origin 'https://www.lorem.io' and URL 'https://www.lorem.io/'.

You're ember.js configuration file defines rootURL to be "https://cdn.lorem.io" which is wrong. When accessing lorem.io your rootURL is supposed to be "https://www.lorem.io".
Perhaps you meant baseURL. See this explanation for the difference between rootURL and baseURL.
Warning: Keep in mind, that baseURL gets deprecated in ember-cli 2.7.

Our locationType setting in our configuration file is hash in production.
In ember.js configuration file, can you change your locationType as hash, and try again:
ENV.locationType = 'hash';
From Guide
From a discussion on github

Related

Nuxt SSG app not routing correctly on google cloud bucket, goes to dir/index.html on reload

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.

AWS S3 / Cloudfront deployment - certain paths aren't updating on static website

I'm fairly new to AWS and web dev - I have a simple static website at https://iveyfintechclub.ca
I recently refactored the code and made some changes to the project organization. I basically wiped the S3 bucket and reuploaded all new files and folders.
On CloudFront, I have object caching set to use origin cache headers:
my CloudFront distribution behavior config
I also did an invalidation with /*.
On S3, I've set the metadata Cache-Control to max-age=0 for all files.
Two problems are still eluding me:
The old bucket had a blank index.html which redirected to a
nested HTML file. The new bucket has index.html as the landing page.
When I attempt to visit the root URL, I get a 404 error as it still
attempts to reach the old nested HTML path. This doesn't happen in incognito mode (browser cache issue).
2. On the new landing page, I have a script file which is getting a 404
error as its looking for the file on its old path. Inspecting the HTML shows that the new path is in the client. This is happening in incognito mode too. All other resources are loading properly with
new paths, just this one is failing.
I'm wondering if I just have to wait longer or if I'm still missing a configuration.

serverless express/jade website on AWS

I am new to serverless, and try to build a simple express website on AWS with lambda and api gateway.
The site runs successfully on my local, but after deploying to AWS, there is a issue about jade route as AWS gives a stage name to deployed API, for example: the root(/) url is something like - https://opl3cla000.execute-api.ap-southeast-2.amazonaws.com/prod(the prod is stage name). While in my jade layout.jade, I have code like
ul.nav.navbar-nav
li
a(href="/page1") Page1
li
a(href="/page2") Page2
My jade code does not include the stage name, so it gives 403 as the path is https://opl3cla000.execute-api.ap-southeast-2.amazonaws.com/prod/page1 instead of https://opl3cla000.execute-api.ap-southeast-2.amazonaws.com/page1.
I am not sure if it is the correct configuration, and how can I fix it?
I use the middleware from awslabs/aws-serverless-express and get the answer from the author.
The reference link is below:
https://github.com/awslabs/aws-serverless-express/issues/11

Redirects for Ember app on shared hosting (hostgator)

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!

Setting CORS for static files on ember-cli server

How do I set CORS on requests for fonts files (or any other static resource) on the built in ember-cli server?
This is the error message just for reference:
Font from origin 'http://some-domain:4200' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:61277' is therefore not allowed access.
Add the following to ENV in config/environment.js:
module.exports = function(environment) {
contentSecurityPolicyHeader: 'Content-Security-Policy',
contentSecurityPolicy: {
// ... other stuff here
'font-src': "'self' http://some-domain:4200",
},
}
I tried adding the CSP settings but it was unsuccessful for me. I still got CORS errors for font files being referenced from my Ember app's CSS. In another post I saw someone mention ember-cli-cors which I tried and seemed to solve the issue for me. It just adds CORS headers allowing requests from everywhere to all resources which is exactly what I needed to get all resources to load properly in my local dev environment serving the Ember app assets using ember-cli's built in ember serve command to another local development server running a Python app serving my index.html from Redis(ember-cli-deploy style).