I have made a simple hacker-news project. It has simple functionalities like search ,redirect to next page etc.
It works perfectly fine on loacalhost but after I deployed it none of the functionalities work what should I do.
This is my github repo: https://github.com/yashkr18/Hacker-News.
This is the deployed version: https://6131026147f71d1505e11cb8--naughty-lewin-cc520d.netlify.app/
Looks like you are trying to call http from an HTTPS:
Table.js:40 Mixed Content: The page at
'https://6131026147f71d1505e11cb8--naughty-lewin-cc520d.netlify.app/'
was loaded over HTTPS, but requested an insecure resource
'http://hn.algolia.com/api/v1/search?query=a'. This request has been
blocked; the content must be served over HTTPS.
Change your urls to https and it will work just fine. I put it in a sandbox and tested: https://codesandbox.io/s/heuristic-paper-bdy7j?file=/components/Table.js
Related
I made a react project with create-react-app and deployed it via AWS Amplify.
I was trying to rewrites several routes under the same domain to open the other web sites. It seems like using the way of reverse-proxy.
So, through Rewrites and redirects console, I added a rule like below.
Source address
Target Address
Type
/test/<*>
(a different origin which is deployed in the amplify, too)
200 (Rewrite)
However, when the /test has been routed, the rewrites is not working. Looking into the Network tab in devtools, the browser tried to fetch static files from the Target address domain, but it fails.
I need to deploy a simple react app just for showcase purposes. But there is a problem when I'm trying to host it on Netlify, Vercel, Firebase and I can't use heroku. I'm getting this.
Mixed Content: The page at 'https://ip-tracker-b72ffu8s0.vercel.app/' was loaded over HTTPS, but requested an insecure resource 'http://api.ipstack.com/check?access_key=3a79079d875...'. This request has been blocked; the content must be served over HTTPS.
I would like to use https://api.ipstack.com/check instead of http://api.ipstack.com/check
but free plan do not allow me to use https.
The question is where I can deploy react-app on http? I don't care about safe connections. I just want to deploy as a demo.
My frontend is deployed on Netlify. all the get request working well but POST, PULL, DELETE request is not working.
My backend is on Heroku..
Is it CORS problem or else?
Thank you very much.
this is my console after post request
From your linked screenshot, it appears that you're connecting to your API using relative URLs, for example: /api/something. Locally, this would most likely work as you'd most likely have your backend running too.
However, on production this would not work, because browsers will resolve /api/something relative to the domain which is now on Netlify. Since Netlify doesn't have your backend app running, and there is no asset at /api/something, Netlify sends back a 404.
The solution would be to use Netlify Rewrites: https://docs.netlify.com/routing/redirects/rewrites-proxies/. You could add something like:
/api/* https://your-heroku-url.com/:splat 200!
... in a file named _redirects which should be added to the publish folder on Netlify.
This would resolve /api/something to https://your-heroku-url.com/something. You might have to change the redirects based on your configuration.
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:
Im using Bootstrap and AngularFire for my Web project. Everything ok but when I host it on Firebase.com. The layout has changed
Errors:
Mixed Content: The page at 'https://......firebaseapp.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'. This request has been blocked; the content must be served over HTTPS.
Mixed Content: The page at 'https://......firebaseapp.com/' was loaded over HTTPS, but requested an insecure script 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'. This request has been blocked; the content must be served over HTTPS.
What happens with Bootstrap? Thanks in advance!
Firebase uses HTTPS to serve content. As you can see from the error, you are referring the content to be loaded over HTTP. Though this should not be happening, but it could be one of recent features of Chrome where they block, non-secure requests over a secure channel.
In order to solve it, you should change the URLs in your code to point at HTTPS versions of Bootstrap CDN.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
Further Read: https://support.google.com/chrome/answer/1342714?hl=en
I was having the same issue:
you just need to make the http to https
in the bootstrap link inside the code.
That will resolve the issue.