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.
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.
The front-end app is built on ReactJs and development server is running on http://localhost:3000. The back-end API is built with Flask 2.0.2 and is running on http://localhost:5000
In app.py file, the CORS has been allowed as mentioned in the documentation like:
CORS(app, resources={r"*": {"origins": "*"}})
When I try to submit the login form I still get the following error:
if you Enables CORS on your backend api , it should work.
I don't think this is an issue with your react frontend application.
cors is a security measure put in by browsers.
You could bypass the Cross-Origin-Policy with chrome extension but it's not advisable -
Try this on your backend API:
Ensure you have flask cors installed
create a configuration dictionary like this
api_v1_cors_config = {
"origins": ["http://localhost:5000"]
}
You can then set a global cors for your app like this
CORS(app, resources={"/api/v1/*": api_v1_cors_config})
// this would allow all methods, origins
HTTP Error 404.3 - Not Found
The page you are requesting cannot be served because of the extension configuration. If the page is a script, add a handler. If the file should be downloaded, add a MIME map.
I got this error when accessing react frontend. the app is hosted on the azure app service. so anyone knows how to fix this? is it need to be done in react side?
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
Current state: Depending on the npm start script, my web app is accessible by at the http:// address, or the https:// address, but not both.
Goal: I'd like the app to run on https://, and for any http:// requests to be redirected to https://.
App info: The web app is created with Sails for the server, and create-react-app for the UI. To run locally, I use two terminals to start each up (server on :1337, UI on :3000). To run in prod, I build the UI and copy the build into the server folder, then start the server on :84 (:80 already taken).
What I've tried:
I've tried adding redirection on the Sails server by adding middleware and policies.
I've tried adding redirection on the UI by adding a script in the HTML header, checking for window.location.protocol in index.js, adding to the http-proxy-middleware, and using react-https-redirect.
In all cases, I'm able to access the app if I go to the https:// address, but get err_empty_response from the http:// one. None of my http:// requests seem to even reach the app or server.
I've heard that using NGINX as a load-balancer may solve this, but I'm hoping for a solution that doesn't require as much set up. Any suggestions?