I have a site that works fine. Today I tried to install a certificate SSL to pass my site to https.
But once I did it, my site opens (in https now) with no layour or javascript working.
I am using a NGINX server with a GANDI SSL certificate. I donwloaded the certificates in the site and added this in /etc/nginx/sites-available
listen 443;
server_name my.server.fr;
ssl on;
ssl_certificate /etc/nginx/certificates/certificate-99999.crt;
ssl_certificate_key /etc/nginx/certificates/my.server.fr.key;
This is a problem could be related to any configuration of the certificate, or the construction of the pages?
Check your browser console.
There could be errors due to mixed contents... move http resources to https.
Related
I have created a website example.com which have 2 section called "service" & "ideas" are dynamic data. Which are coming from http://api.example.com/ourservice.json & http://api.example.com/ideas.json
in my project while I am running it in localhost it's fetching those data from the API, But when I uploaded the react build folder in server it's not fetching those data.
Is there anything I am missing? Is it the API's problem?
in nginx of the api.example.com's config file I have this config
server {
# Binds the TCP port 80.
listen 80;
# Root directory used to search for a file
root /var/www/html/example_static_api;
# Defines the file to use as index page
index index.html index.htm;
# Defines the domain or subdomain name.
# If no server_name is defined in a server block then
# Nginx uses the 'empty' name
server_name api.example.com;
location / {
# Return a 404 error for instances when the server receives
# requests for untraceable files and directories.
try_files $uri $uri/ =404;
add_header Access-Control-Allow-Origin *;
}
}
Is there anything I am missing!
The following link explains the reason for this problem and how to fix it. In short, I want to tell you that because the services you are calling do not have an ssl certificate and must be called https, you can easily see the error in the browser console
How to fix "insecure content was loaded over HTTPS, but requested an insecure resource"
After searching on StackOverflow I found the answer, there was 2 way to solve it. The first thing is adding SSL to the API URL.
and the second thing which was originally answered here by #buzatto.
"that's related to the fact that the api is served at http while your site is loaded https, so the browser blocks the request.
since you have no control over the fact that the 3rd party api, you can solve the issue adding the meta tag <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> "
on front I use react on back .net core 3.1
on client I use webpack that is runned on localhost:8080
in Startup.cs I use proxyToSpa
applicationBuilder.UseSpa(spa =>
{
spa.UseProxyToSpaDevelopmentServer("http://localhost:8080/");
});
on HTTP works as expected without any errors but on HTTPS I saw a lot of console errors and failed requests in Network there is failed requests for (sockjs-node/info?t=...) with error net::ERR_SSL_PROTOCOL_ERROR
Is there any options to configure webpack or .net core project to avoid these error logs on HTTPS?
This might be the issue, it worked for me
https://howchoo.com/chrome/stop-chrome-from-automatically-redirecting-https
If you ever visited the https version of a website (whether it resolved or not), Google Chrome might repeatedly send you to that version
https://webpack.js.org/configuration/dev-server/#devserverdisablehostcheck
using cli
webpack-dev-server --disable-host-check
or in webpack config
devServer: {
disableHostCheck: true
}
My main site was using https (reverse proxy to development server), so definining public: http://... didn't help for my development server, because the browser forced https (as the main site was https to).
What helped me was using https in the devServer too:
https://stackoverflow.com/a/29772748/3279070
It was important that devServer HTTPS was signed with a good certificate like the main site was (the reverse proxy) and uses a hostname (public property) signed by the cert. So for example typical scenario is using the same certificate files and the same hostname (public: 'https://hostname:8081') as the main site
I am setting up a Localhost domain so it can communicate with this third-party API and Auth servers.
For example, change 127.0.0.1 to local.example.com
local.example.com is the domain whitelisted with this third-party enterprise. I need to set this up so i can run API routes to it.
I was able to change 127.0.0.1 locally in C:\Windows\System32\drivers\etc\hosts file and now Node.js is running on it.
I added the webpack config devServer - host to local.example.com but the port is still there. I need to understand how to change this for react because right now it's porting to local.example.com:3000.
A little late to the party but it still might be useful.
Go to C:\Windows\System32\drivers\etc\hosts and add this line:
127.0.0.1 local.example.com
In the React project, add a .env file with:
HOST=local.example.com
PORT=3006
I think you're almost there :-) The devServer option has a port property. Set that to 8080 or 80. Restart your server. Then, open the browser and try leaving it off the URL
After digging around, I found some solutions. Essential, my goal was to set http://localhost:3000 to http://local.example.com.
1. Add local.example.com to your hosts file (windows)
2. Set up your react port to 80
This would remove the 3000 on local.example.com:3000 to local.example.com
On HTTPS request, set the port to 443
This would result to https://local.example.com
This question already has an answer here:
How to force node.js/express.js to HTTPS when it is running behind an AWS load balancer
(1 answer)
Closed 5 years ago.
I have running server nodeJs with express module. And website is made by React.js which is server-side-redering.
And I have domain : www.example.com, Route53 with load balancer applied AWS Certificate Manager.
the problem is I don't know how to automatically access https:// protocol, when I type url http://www.example.com
now, I can access each of url like as http://www.example.com or https://www.example.com
I found solution :
app.use (function (enter code herereq, res, next) {
if (req.secure) {
next();
} else {
res.redirect('https://' + req.headers.host + req.url);
}
});
but it's not working...
what is nice way???
update
if using nodejs with express, how to set a port?
the express block port 80, So I use
sudo iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT --to-ports 3000. is it common method to connect port?
I have load balancer using SSL (ACM), and port using port are 80, 443.
how to directly access that either 'http' or 'https should access https.
When deploying NodeJS applications it is recommended to use a web server like Nginx or Apache infront of Node server as a proxy, for gzip encoding, static file serving, HTTP caching, SSL handling, load balancing and etc.
One option is to have the redirection at proxy level
In AWS another option is to use Cloudfront with http to https redirect for behavior of the origin (Also caching static content at Edge Location level)
I'm using fetch in a react-native app, and charles proxy to debug my network requests. In order to use charles with SSL, I need to configure fetch to accept a self-signed certificate generated by charles.
How do I tell fetch to ignore errors from self-signed certificates when using https?
I fixed this by setting up the SSL certificates in the simulator: Help > SSL Proxying > Install Charles Root Certificate in iOS Simulators) in charles and be happy!
Thanks https://stackoverflow.com/a/35047215/82156