Cloudfront 404 page not loading js - amazon-cloudfront

I have a Gatsby React site in an S3 bucket hosted through CloudFront.
Using error configurations in CDK, my site will load the correct 404 page when an error occurs.
However, the js on the 404 page will not load and this error is displayed in the console.
Uncaught (in promise) Error: page resources for /nonexistentpage/ not found. Not rendering React at ...
Cloudfront config
responseCode: 200,
errorCachingMinTtl: 604800,
errorCode: 404,
responsePagePath: "/error.html"
This works locally so I assume it is a cloudfront issue.

If anyone else is struggling with this, changing responseCode to 404 fixed this problem

Related

Flask: Elastic Beanstalk always giving a 502 Bad Gateway error when trying to request favicon.ico

I've been trying to deploy a very simple flask app onto AWS. But I just can't seem to make it work. It always gives me the same error that favicon.ico is not found in the console and gives me a 502 bad gateway error.
Solutions I've tried:
Tried saving it to Amazon S3 bucket and reference it from there. Didn't work. Gave me the same error.
base.html has the following line
<link rel="icon" type="image/png" href="https://elasticbeanstalk-us-east-1-503477540785.s3.amazonaws.com/favicon.ico">
application.py has the following route
#application.route('/favicon.ico')
def favicon():
return Response(headers={'Location': 'https://elasticbeanstalk-us-east-1-503477540785.s3.amazonaws.com/favicon.ico'}, status=200)
I tried changing the status to 301 too, didn't change anything.
When I try to go to local-website/favicon.ico, it redirects me to https://elasticbeanstalk-us-east-1-503477540785.s3.amazonaws.com/favicon.ico. But when I save it locally and try to go to the same url, the .ico file loads up at http://127.0.0.1:5000/favicon.ico.
How do I make this work?

Failed to load resource: the server responded with a status of 404 (Not Found) Express

This file contain the file structure
This file contains the directory settings
While trying to add static images to the home.ejs folder i am constantly getting this error:-
Failed to load resource: the server responded with a status of 404 (Not Found)
I tried to use the app.use(express.static('public')) but the issue still persist.
This is the path i used:
assets/img/hero.jpg
I cannot figure out how to solve this issue and is there is something wrong with file structure or i made mistake while referencing the file name.
First we need to set the path
app.set('/views',path.join(__dirname,'/views'))
then we can use image by using this path:
img/hero.jpg

PostForm.js:36 POST http://localhost:3000/ 404 (Not Found)

I am developing my college project but the post method does not work. I am using the native fetch method to post and MongoDB as a database.
I had tried Axios as well but I got the same error.
PostForm.js:36 POST http://localhost:3000/ 404 (Not Found)
server.js
backend code
PostForm.jsx
PostForm code
please anyone tell me what is the mistake I have made.
add "proxy": "http://localhost:3000" in your React Project's package.json file , and restart your project
then in fetch method , url will /
fetch('/',{method:POST,...})

angular-cli#webpack with primeng 404 issues

I get the following errors in a starter project with angular2, angular-cli#webpack and primeng. The only ui component from PrimeNG is a dropdown which renders and it has its values but no css theme is applied ever.(see errors below in regards to CSS). I am not sure why I get this error and have spent countless hours with no result so I am at a loss at this point. Component was generated with ng command and ng serve runs the web server. Anybody any idea? I also have tried both node.js 6.5.0 and 4.5.0 (switching and managing them with nvm).
Any help is appreciated deeply.
Failed to load resource: the server responded with a status of 404
(Not Found)
http://localhost:3000/node_modules/primeng/resources/primeng.min.css
Failed to load resource: the server responded with a status of 404
(Not Found)
http://localhost:3000/src/app/resources/css/font-awesome-4.6.3/css/font-awesome.min.css
Failed to load resource: the server responded with a status of 404
(Not Found)
http://localhost:3000/node_modules/primeui/primeui-ng-all.min.css
Failed to load resource: the server responded with a status of 404
By the way now I posted the code in: https://github.com/GregHila/primeng-angular-cli.
Under the src/ there should be a file styles.css. I think you can import the styles here.
Eg.:
#import '../node_modules/primeng/resources/primeng.min.css';
The other way is to mention them in the angular-cli.json file in the styles array.
If you are using the webpack branch, then node_modules will not exist in the served directory. You will have to import the libraries you want to use, which will cause webpack to bundle them for you. Alternatively modify apps[0].scripts and apps[0].styles properties of angular-cli.json like in https://github.com/angular/angular-cli#global-library-installation.
Seems like 1.0.0-beta.11-webpack.9-4 has also fixed the bug

node.js website deployed to Azure - 404 failed to load a .json resource

I have a node.js Web App in Azure,
the site loads the index.html, the css, images, etc. but the JS search functionality doesn't initialize,
I did an F12 inspection in Chrome and saw this error
[domain].azurewebsites.net/data/policies.json Failed to load resource: the server responded with a status of 404 (Not Found)
in the Azure console I can see the file list
> cd public
D:\home\site\wwwroot\public
> cd data
D:\home\site\wwwroot\public\data
> ls
D:\home\site\wwwroot\public\data
policies.json
according to the folder/file structure (everything is in the /public folder) I have made a configuration change as follows
/ = "site/webroot/public"
the folders are laid out like this
/public/index.html
/public/data
/public/js
/public/css
etc
Without the config setting the website doesn't see /public as the root folder, so it doesn't find the index.html and nothing loads.
So the site loads, which is great,
the images and css load, which is great
but it says it can't find the .json file in the data folder?
(and using the console the file is definitely there!)
please advise.
You need to set the JSON MIME type in web.config
This link explains how to fix it:
http://blogs.msdn.com/b/africaapps/archive/2013/06/07/how-to-serve-static-json-files-from-a-windows-azure-website.aspx

Resources