Flask Restplus Swagger Not Loading Behind Nginx - nginx

I have a Flask API and a Swagger UI generated with Flask Restplus. The API runs in a Docker container behind an Nginx container which serves it over HTTP.
Here is a health check endpoint which confirms the API is running:https://mobydq.net/mobydq/api/v1/health
{"message":"MobyDQ API running in production mode"}
However, the Swagger which is supposed to load at the following URL does not load at all: https://mobydq.net/mobydq/api/doc
Here is the Nginx configuration:
http {
upstream api {
server api:5434;
}
upstream app {
server app:3000;
}
# Server for https
server {
listen 443 ssl http2;
server_name mobydq.net;
ssl_certificate /etc/letsencrypt/live/mobydq.net/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/mobydq.net/privkey.pem;
# Location for MobyDQ Flask API
location /mobydq {
limit_req zone=default burst=20;
proxy_pass http://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-Proto $scheme;
}
# Location for MobyDQ Web App
location / {
limit_req zone=default burst=20;
proxy_pass http://app;
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-Proto $scheme;
}
}
# Default server to redirect http requests to https
server {
listen 80 default_server;
server_name mobydq.net;
listen [::]:80 default_server;
location ~ /.well-known {
root /var/www/letsencrypt;
}
location / {
return 301 https://$host$request_uri;
}
}
}
Any idea why the Swagger is not loading? I looked into the http requests sent when loading the page but it did not help much. I can only see the favicon loading:
I also looked at the console and saw an error but I'm not able to tell what it means:

The problem was that Nginx did not properly redirect the http requests when trying to get the resources from Swagger (the JSON configuration file in particular).
The issue has been fixed by changing the Nginx configuration as follow:
[...]
# Location for MobyDQ Flask API
location ~ ^/(mobydq|swaggerui) {
limit_req zone=default burst=20;
proxy_pass http://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-Proto $scheme;
}
[...]

Related

nginx configuration to avoid "ERROR DOMException: Blocked a frame with origin xxx from accessing a cross-origin frame"

I have to embed three different websites into my www.myapp.com app by using iframes. Let's suppose the URLs of these websites are:
website1.com
website2.com
website3.com
These websites cannot be directly embeded by iframe because their servers set the X-Frame-Options response header to SAMEORIGIN, so I used nginx as a proxy to remove these X-Frame-Options headers:
# parent application: myapp.com:
server {
listen 8080;
server_name myapp.com www.myapp.com;
location /stand {
root /srv/www;
try_files $uri $uri/ /stand/index.html;
}
}
# website1.com proxy:
server {
listen 8080;
server_name proxywebsite1.com www.proxywebsite1.com;
location / {
proxy_pass https://www.website1.com/;
proxy_set_header www.website1.com;
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_hide_header 'x-frame-options';
}
}
# website2.com proxy:
server {
listen 8080;
server_name proxywebsite2.com www.proxywebsite2.com;
location / {
proxy_pass https://www.website2.com/;
proxy_set_header www.website2.com;
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_hide_header 'x-frame-options';
}
}
# website3.com proxy:
server {
listen 8080;
server_name proxywebsite3.com www.proxywebsite3.com;
location / {
proxy_pass https://www.website3.com/;
proxy_set_header www.website3.com;
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_hide_header 'x-frame-options';
}
}
With the configuration above, I can now embed the three sites into iframes even the domain are different (www.myapp.com, proxywebsite1.com, proxywebsite2.com, proxywebsite3.com).
BUT NOW, I want to hide some elements (footer, header, ...) of the embedded websites by using JavaScript, and it's blocked because the domains are different. I've got the below error in browser's console:
"ERROR DOMException: Blocked a frame with origin xxx from accessing a cross-origin frame"
So my question: is there a way to configure nginx so myapp.com and proxywebsite1.com are not seen as different domain by the browser ?

Reverse proxy nginx to application

I have a synology and I want to link a subdomain to one of this application. This is the URL I usually use to access to this service:
192.168.0.17:5001//index.cgi?launchApp=SYNO.SDS.App.FileStation3.Instance&launchParam=openfile%3D%252FOliver%252F
But this is too long and I want to access it directly this mydomaine.com
How should I configure the server ?
I tried this but it doesn't work :
server {
listen 80;
listen [::]:80;
resolver 89.2.0.1;
server_name test.fr;
location / {
proxy_set_header Host $http_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_intercept_errors on;
proxy_http_version 1.1;
proxy_pass http://192.168.0.17:5000/index.cgi?launchApp=SYNO.SDS.App.FileStation3.Instance&launchParam=openfile%3D%252FOliver%252F;
}
}
Thanks a lot for your help!

nginx proxy requests for a specific path

Is it possible to pass requests for a specific path to a different upstream server?
Here is my nginx site configuration:
upstream example.org {
server 127.0.0.1:8070;
keepalive 8;
}
server {
listen 0.0.0.0:80;
server_name example.org www.example.org;
access_log /var/log/nginx/example.org.log;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://example.org;
proxy_redirect off;
}
}
Currently, requests to this site are redirected to a Node.js instance running on port 8070.
I would like requests to this site that have a path starting with /services to be redirected to another Node.js instance running on port 8080.
Is this possible? And of course -- how so?
Yes, just add another location block:
upstream example.org {
server 127.0.0.1:8070;
keepalive 8;
}
upstream other.example.org {
server 127.0.0.1:8080;
keepalive 8;
}
server {
listen 0.0.0.0:80;
server_name example.org www.example.org;
access_log /var/log/nginx/example.org.log;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_redirect off;
location / {
proxy_pass http://example.org;
}
location /services {
proxy_pass http://other.example.org;
}
}
Note: I extracted all shared proxy directives into the server block so that they are not repeated in each location block. If they would differ between different locations, you would have to move them again into the location blocks...

nginx redirect all http to https with exceptions

I would like to redirect all http traffic to https with a handful of exceptions. Anything with /exception/ in the url I would like to keep on http.
Have tried the following suggested by Redirect all http to https in nginx, except one file
but it's not working. The /exception/ urls will be passed from nginx to apache for some php processing in a laravel framework but that shouldn't matter.
Any suggestions for improvement much appreciated!
server {
listen 127.0.0.1:80;
location / {
proxy_pass http://127.0.0.1:7080;
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-Accel-Internal /internal-nginx-static-location;
access_log off;
}
location /exception/ {
# empty block do nothing
# I've also tried adding "break;" here
}
return 301 https://localhost$request_uri;
}
Nginx finds the longest matching location and processes it first, but your return at the end of the server block was being processed regardless. This will redirect everything but /exception/ which is passed upstream.
server {
listen 127.0.0.1:80;
access_log off;
location / {
return 301 https://localhost$request_uri;
}
location /exception/ {
proxy_pass http://127.0.0.1:7080;
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-Accel-Internal /internal-nginx-static-location;
}
}

NGINX => serve several applications on a single host name with sub-uris

I'd like to serve several applications from the same server, reversed-proxied through nginx. I'd like these applications to be available through a single domain name with sub-uris.
e.g.
www.mydomain.com/nodejs
=> caught by nginx listening to port 80 and served through to a node.js app running on port 3001
www.mydomain.com/rails
=> caught by nginx listening to port 80 and served through to a rails app running on port 3002
My first stab is to start with two upstreams:
# /etc/nginx/sites-available/mydomain.com
upstream nodejs {
server 127.0.0.1:3001;
}
upstream rails {
server 127.0.0.1:3002;
}
server {
listen 80 default deferred;
# What do I put here so that
# mydomain.com/nodejs is proxied to the nodejs upstream and
# mydomain.com/rails is proxied to the rails upstream ???
}
Does anyone know this or point me in the right direction?
How about:
upstream nodejs {
server 127.0.0.1:3001;
}
upstream rails {
server 127.0.0.1:3002;
}
server {
listen 80;
location /nodejs {
proxy_pass http://nodejs;
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;
}
location /rails {
proxy_pass http://rails;
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;
}
}
or shortly:
server {
listen 80;
location /nodejs {
proxy_pass http://127.0.0.1:3001;
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;
}
location /rails {
proxy_pass http://127.0.0.1:3002;
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;
}
}
?
Most of the proxy directives are optional (you probably just need proxy_pass and proxy_redirect) but useful.
About the question ,css、js、images files are missed , you can do like this,
if you use express framework。
you need add this code line
app.enable('trust proxy');
this value 'trust proxy' default value is disable.

Resources