I have default Digital Ocean installation of strapi. I've changed api based hostname for my domain and I have this error:
this:main.f910bea6.chunk.js:13 Mixed Content: The page at 'https://api.myhostname.app/admin' was loaded over HTTPS, but requested an insecure resource 'http://999.999.999.999/admin/init'. This request has been blocked; the content must be served over HTTPS.
Main site is displaying correctly. Problem is in admin panel.
This is my nginx config:
server {
# Listen HTTP
listen 443 ssl http2;
listen [::]:443 ssl http2;
#listen 80;
server_name api.myhostname.app;
ssl_certificate /etc/ssl/hostname.pem;
ssl_certificate_key /etc/ssl/hostname.key;
# Proxy Config
location / {
proxy_pass http://strapi;
proxy_http_version 1.1;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $http_host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_pass_request_headers on;
}
}
and .env file:
NGINX_URL=https://api.myhostname.app
ADMIN_JWT_SECRET="best"
and config:
module.exports = ({ env }) => ({
host: env('HOST', '0.0.0.0'),
port: env.int('PORT', 1337),
url: env('NGINX_URL', ''),
admin: {
auth: {
secret: env('ADMIN_JWT_SECRET'),
},
},
});
What's wrong?
I resolved the problem. This required rebuilding admin panel, like that:
npm run build
Weird but works.
Related
I have trouble configuring SSL with reverse proxy.
What I have: Proxmox installed with 3 containers - 2 containers are with websites and 3rd is a reverse proxy.
Container 1
domain1.com
domain2.com
Container 2
domain3.com
domain4.com
Public IP points to Container 3 (which is a reverse proxy).
How and "where" (on containers, on the reverse proxy, or on both) should I issue an SSL certificate? I want all of the domains to work only via HTTPS.
Reverse proxy has the following configuration:
server {
listen 80;
server_name domain1.com;
location / {
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $http_host;
proxy_pass http://192.168.4.100:80;# Container 1
}
}
server {
listen 80;
server_name domain2.com;
location / {
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $http_host;
proxy_pass http://192.168.4.100:80;# Container 1
}
}
server {
listen 80;
server_name domain3.com;
location / {
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $http_host;
proxy_pass http://192.168.4.200:80;# Container 2
}
}
server {
listen 80;
server_name domain4.com;
location / {
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $http_host;
proxy_pass http://192.168.4.200:80;# Container 2
}
}
Update: I am able to issue a domain certificate but to make everything work I have to put these certificates on BOTH containers: for reverse proxy and container with domain/website itself. I believe it's kind of dirty and hard to maintain. Please advise
I would just add the SSL certificates to the reverse Proxy and use http to the internal web servers (containers)
I recently added websockets to my Nginx reverse proxy on GCP. However, nginx proxy gives me an error "Connection refused while connecting to upstream. upstream: "http://127.0.0.1:3000/apisocket.io/?EIO=4&transport=polling&t=NrYupkL", . Not sure what us wrong.
The Websocket works fine if I bypass Nginx.For some reason the error.og shows it as trying to connect to upstream on port 3000 instead of port 4000
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
server {
listen 80 default_server;
listen [::]:80 default_server ipv6only=on;
# Make site accessible from http://localhost/
server_name localhost www.localhost.com;
gzip on;
gzip_proxied any;
gzip_vary on;
gzip_http_version 1.1;
gzip_types application/javascript application/json text/css text/xml;
gzip_comp_level 5;
gzip_min_length 256;
location / {
proxy_pass http://localhost:3000/api;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
# Uncomment to enable naxsi on this location
# include /etc/nginx/naxsi.rules
}
location /api {
proxy_pass http://localhost:3000/api;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
# Uncomment to enable naxsi on this location
# include /etc/nginx/naxsi.rules
}
location /api2 {
proxy_pass http://localhost:4000/api2;
proxy_set_header Host $host;
proxy_redirect off;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
# Websocket support
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
}
My application is split as:
Nuxt frontend website in a repository
Laravel backoffice AND API in a different repository (same server)
What I'm trying to achieve is setting up nginx into two server blocks, so that:
Nuxt is served via port 3000 (reverse proxy)
Laravel's backoffice is served as a regular php webpage on port 80
The API is served on port 8000 so that the website can fetch data
These are my HTTP configs:
API and backoffice
server {
listen 80;
return 301 https://$host$request_uri;
}
server {
listen 443 ssl;
root /var/www/api/public;
server_name api.website.com;
index index.php index.html;
location / {
try_files $uri $uri/ /index.php?$query_string;
}
location /api {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_pass http://localhost:8000;
proxy_read_timeout 90;
proxy_redirect http://localhost:8000 https://api.website.com;
}
location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/run/php/php7.4-fpm.sock;
}
location ~ /\.ht {
deny all;
}
ssl_certificate /etc/letsencrypt/live/api.website.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/api.website.com/privkey.pem;
include /etc/letsencrypt/options-ssl-nginx.conf;
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
}
Website
server {
listen 80;
return 301 https://$host$request_uri;
}
server {
listen 443 ssl;
server_name website.com www.website.com;
location / {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_redirect off;
proxy_read_timeout 1m;
proxy_connect_timeout 1m;
proxy_pass http://127.0.0.1:3000;
}
ssl_certificate /etc/letsencrypt/live/www.website.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/www.website.com/privkey.pem;
include /etc/letsencrypt/options-ssl-nginx.conf;
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
}
With these settings on nginx I'm getting a 403 when I try to reach the backoffice, and while the website works, I'm getting a gateway timeout ("Error occured while trying to proxy to") in any request I make.
How can I have it so that I can:
Browse to api.website.com and have the Laravel + Vue.js website open up
Browse to website.com and have the compiled Nuxt website open and fetching API data from api.website.com:8000
Both of these while under HTTPS
Any help would be greatly appreciated.
I've the following:
HTTPS access to a NAS or something like that.
NGINX as reserve proxy as container
Container with a Tomcat as appcontainer.
NAS forwards HTTPS request as HTTP to NGINX container. Then NGINX container forwards HTTP request to my appcontainer.
I can access to my appcontainer login page but after login a POST is made as follows
Nginx access.log
POST /foo/login.do HTTP/1.1" 302 0 "https://nas.dns.server/foo/login.do
In localhost_access.log in appcontainer tomcat shows
POST /foo/doLogin.do HTTP/1.0" 302
And request as HTTP to the NAS
It seems that is ignoring X-Forwarded-Proto header.
My nginx.conf is configured as follows:
server {
listen 80;
server_name $hostname;
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
error_log /dev/stdout info;
access_log /dev/stdout;
client_max_body_size 100M;
proxy_connect_timeout 300;
proxy_send_timeout 300;
proxy_read_timeout 300;
send_timeout 300;
resolver 127.0.0.11 valid=30s;
sendfile on;
location /foo {
proxy_set_header Origin "";
set $appcontainer http://appcontainer:8080;
proxy_pass $appcontainer;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $https; #I’ve also tested with $scheme
}
}
Thanks
Having a look to the Developer Tool of Chrome in the Network tab in can see that for the call of login.do there is Request URL: https://entry.proxy.url/foo/doLogin.do but in the Response Headers I can see what is generating the problem Location: http://proxy.entry.url/foo/login.do that must be Location: https://proxy.entry.url/foo/login.do .
I've tried doing redirection as proxy_redirect http://entry.proxy.url/ https://csprocure.ciport.be/; in the location and it works.
So location is set as:
location /foo {
proxy_set_header Origin "";
set $appcontainer http://appcontainer:8080;
proxy_redirect http://proxy.entry.url/ https://proxy.entry.url/;
proxy_pass $appcontainer;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $https; #I’ve also tested with $scheme
}
I have 2 servers,
with IP xx.xx.xx.xx, situated in Germany ... (running frontend: nginx(static content), backend: Apache2)
with IP yy.yy.yy.yy, situated in Italy...
All requests at the moment is sending to server with IP xx.xx.xx.xx,
How can I proxy all traffic from xx.xx.xx.xx to yy.yy.yy.yy using nginx ...
request proxy, request
Internet -> xx.xx.xx.xx(nginx) -> yy.yy.yy.yy(nginx, Apache)
<- <-
response proxy, response
For others. Answer for subject is configure Nginx like:
server {
listen 80;
server_name mydomain.example;
location / {
access_log off;
proxy_pass http://mydomain.example:8080;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
You can use upsteream like:
upstream xx.xx.xx.xx:8080{
#ip_hash;
server xx.xx.xx.xx:8080 max_fails=2 fail_timeout=2s;
server yy.yy.yy.yy:8181 max_fails=2 fail_timeout=2s;
}
then you can use the cookie or header to set the request like:
location /app {
if ($cookie_proxy_override = "proxy-target-A") {
rewrite . http://xx.xx.xx.xx:8080/app;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
break;
}
if ($cookie_proxy_override = "proxy-target-B") {
rewrite . http://yy.yy.yy.yy:8181/webreg;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
break;
}
proxy_pass http://xx.xx.xx.xx:8080/webreg;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}