I have the backend server.js file in a folder labeled server alongside a client folder. I have express, cors, and nodemon installed as dependencies in the server folder, and performed a CRA to generate the front end.
However, I created an endpoint to return a json object to test if the server is working and it is not.
Step 1:
First, I attempted to set the "/" endpoint to return a res.send({message: "welcome to the server"}) and display it on the dom.
RESULT:
Cannot Get /
---In the Console of the Chrome browser I see a 404 for the path http://localhost:5000/weather although I've defined the endpoint as instructed, and in Firefox Dev Edition I see that the Content Security Policy blocked a resource http://localhost:5000/favicon
Step 2:
This lead me to attempt a HTTP response header that would include the security policy directives being violated.
Step 3:
Hereafter I learned that the diagnostics are throwing this error because servers by their nature do not serve the contents of the root directory, therefore I included a static path for the folder where that resource would be located to circumvent the cause of the 404 error. I lastly updated the file path in index.html where the /favicon.ico is being referenced and removed the %public% from its url so that it is an exact path to the public folder
Step 4:
Because the combination of configuring the Content Security Policy HTTP request header, updating the path for the server to resolve to the public client folder, and opening it in different browsers did not work. I tried one final thing that I've read from mining stack overflow: removing the devtools.JSONview.enabled from my Firefox browser. To no avail..
What could be the source of this problem? I've tried every solution ive seen so far.. is there something I've overlooked? Does Helmut really fix this issue? If so, what directive would it add that I haven't already? Please, and Thank you
Setting Response Header to include Content Security Policy with relevant directives,
Updating the file path of the favicon.ico resource and setting a static path for express to locate missing directory,
And updating browser settings in Firefox, attempted in Chrome to no avail.
Related
I have a project in react that works on the computer excellently.
But after I do build and upload it to the server all the json files in the public folder get a 404 error (even when I try to access them directly and click on the url I get the same error.)
But the icon and png files from the same folder do appear.
Another problem (which is probably also related) is that when I go through the link pages on the site it goes great. But if I type them directly in the url I get a 404 error message
I tried to add to json
"homepage": ".", "
But even that did not help.
Anyone have an idea?
edit:
the json works .. I had to change the settings of the mime types according to the instructions: https: //docs.plesk.com/en-US/obsidian/administrator-guide/website-management/websites-and-domains/extended- website-management / using-virtual-directories-windows / adding-and-removing-mime-types.65216 /
But I was still left with the problem that when I go directly to the url address it makes me an error page (when the project is on the local host, it works fine!)
Regards,
I am working on a React app that's running on AWS Amplify. My React app is using the react-router-dom library to route to different components. After running amplify publish in the CLI, at the root of the app (obktraining.com) everything is fine in the browser, I can also route to other components in the app just fine as well. But when I refresh my browser while I am on a route (obktraining.com/menu), I get an Access Denied error message.
I have found other posts about similar issues regarding rewrites and redirects in Amplify, but the solutions given do not work for me.
Here is an image of the error:
My Amplify app rewrites & redirects :
Again, the error only displays when I refresh on a route (obktraining.com/menu or obktraining.com/drinks) not on obktraining.com. Is the issue being caused by the react-router-dom library or is it an issue with Amplify settings? I am not sure where to go from here.
I have been facing the same error since days.The error is being caused by the amplify settings. The solution is simple,
Edit your Rewrites and redirects by adding a new rule.
source address = </^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
target address = /index.html
status = 200 (Rewrite)
Country code can be left blank
Save and try refreshing your app again. It should probably work.
use this for reference: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa
Then you can just put in (as Dhruv Godambe posted above)
</^((?!.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>
as the Source address and
/index.html as your target address
You can navigate to 'rewrites and redirects' in your app from AWS Amplify console and click on edit and select open text editor, and add this piece of code in your array(if present) else put the array braces around it.
{
"source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>",
"target": "/index.html",
"status": "200",
"condition": null
}
Reference: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa
Reference:
https://docs.aws.amazon.com/amplify/latest/userguide/manual-deploys.html
I have faced the same problem.
I was using Manual Zip File (Compressed) download (wrong).
Here is how to deploy manually correctely:
Run this command
npm run build
Now a build folder will be created.
2. Compress the content of this folder
Not the content of the whole project.
You chnage directory to the build folder and Compress the content in side.
3. Upload that compressed file Inside the build directory
Now this should work just fine.
:)
The correct rule should be like this:
Source address: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
Target address: /index.html
Status: 200
I was getting the an Access Denied error message too. The error went away when I followed the documentation described in the answer above, but then I got the white screen problem described above too.
Reviewing the steps I noticed the auto-complete for the "Destination Address" listed in the "Rewrites and redirects" settings was /. When I tried using / as the "Destination Address" instead of /index.html I no longer got the white screen and got the expected page content.
Sharing what I found in case this helps others who are seeing a white screen after fixing the error with the rewrite rule described in the answers above. (Note as of Nov 2022 the "Rewrites and redirects" setting page uses the wording "Target Address" instead of "Destination Address".)
I have faced the same problem. I was zipping build folder, but not the contents within the zip folder.
Here is how I fixed it:
Run build command
npm run build
Now a build folder will be created inside your project directory.
Open build folder.
Compress the contents of build folder, and not build folder.
Now upload this new zip created from sub files and folders from build folder.
App will run fine on AWS Amplify.
I got the same error,
I zipped the build folder first then uploaded it and got that error,
but when I just uploaded the folder without zipping it, it worked fine !! weird!!
in my application I used the port 8080
I'm doing application with spring security and Spring MVC in back end and Angular in front end.
My problem is that I do the logged in correctly, but the problem in logged out I implemented correctly in my localhost: http://localhost:8080 worked without problem. When I change it to https:// I get this error:
Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ''. This request has been blocked; the content must be served over HTTPS.
I want to know how to correct that? And how to know which url blocked by https in the browser for example chrome?
This post which gives a solution to your problem: http://www.learningthegoodstuff.com/2015/08/mixed-http-error-with-spring-security.html
All the details are explained there, basically all you have to do is add this two lines to my application.properties file:
server.tomcat.remote_ip_header=x-forwarded-for
server.tomcat.protocol_header=x-forwarded-proto
I fixed by removing a forward slash from the end of a URL fixing everything.this is help me : GET request throws error after app implemented SSL: Mixed Content: This request has been blocked; the content must be served over HTTPS"
This happens when the server is using http (non secured). You can fix it by enforcing https for all resources in the backend. Check here for more details.
In #Jabir Minjibir's answer there is very good link to describe the error. As sum up, when your application works with httpS scheme you can't make visits to unsecure links which is http.
I got this error and fixed it like I wrote below:
Mixed Content: The page at 'https://stackblitz.com/' was loaded over HTTPS, but
requested an insecure XMLHttpRequest endpoint 'http://172.19.0.62:920/'.
This request has been blocked; the content must be served over HTTPS.
You can mask unsecure links with simple-https-proxy npm package. In my experience I was coding an angular sample on httpS://stackblitz.com and I was trying to connect to an Elasticsearch server which doesn't have a domain name. I needed to make it working with ssl but I couldn't modify it's scheme. Thus I installed a proxy which can work secure (httpS).
I installed the npm package:
npm i -g simple-https-proxy#latest
Then I created certificate:
simple-https-proxy --makeCerts=true
Then I ran it
simple-https-proxy --target=http://172.19.0.62:9200 --port=9201 --rewriteBodyUrls=false
In another example:
Please keep in mind, I have not worked with angular JS, nor did I write the code that is causing the error.
I am getting an 404 error on this path:
https://www.helivalues.com/Su6UsWuf/bb/option/mfg/all
but not this path:
http://www.helivalues.com/Su6UsWuf/bb/option/mfg/all
It was noticed that when a user views a certain page in https, the drop down does not load options. Angular Js makes a call to the path mention above which is not an actually file but is used by a php file that based on this path, has a switch that fills in the drop down.
Any ideas on how to get the https version to work? This is on a joomla site and I do have access to the htaccess file if needed. I really just need it to work for a few months while I work on building a new site.
Thanks!
Angularjs is not the issue. Your webserver (Apache/2.2.15 (SuSE) Server at www.helivalues.com Port 443) states the file can not be found. So it looks like something is misconfigured with your apache site.
I've started getting a 404 error on my homepage, yet I can still access the admin area.
Another issue I'm having (which I'm guessing is related) is that I cannot save any changes to the 'Global configuration' page and I get this message when I click save:
'An error has occurred.
0 Could not write to the configuration file'
The configuration.php file permission is set to 0644
This is the website URL: http://www.asgdesign.eu
Any help would be appreciated!
Thanks
1. htaccess
Check the .htaccess file, if you have one in the root folder of your website. If there are no obvious issues, try backing up .htaccess and copying the default htaccess.txt file to .htaccess to see if this helps.
2. SEF
Temporarily disable any third party SEF extensions that are installed.
3. Cache
Try clearing and purging the cache to ensure you are viewing the latest version of the website.