I'm trying a new server configuration using an nginx reverse proxy and ssl, but it seems to break my google OAuth2. I'm using node v6.2.2, pm2 to manage nodejs, and using nginx for ssl and a reverse proxy.
My Nginx server blocks look like:
server {
listen 80;
server_name _;
return 301 https://$host$request_uri;
}
and
server {
listen 443;
ssl on;
include snippets/ssl-example.com.conf;
include snippets/ssl-params.conf;
server_name example.com;
location / {
proxy_pass http://localhost:3001;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
When running the nodejs server on my laptop I'm able to login using passportjs' google strategy with no issues, but as soon as I run the same code behind the reverse proxy I get a redirect_uri_mismatch. I've tried hardcoding the callbackURL to http://example.com/auth/oauthCallback and https://example.com/auth/oauthCallback and have added all variations of those to the OAuth Client IDs. I've tried making small changes to my server blocks and couldn't make much headway, so here I am.
Any ideas for a next step?
Turns out Google's OAuth2 doesn't seem to recognize .xyz domains
Related
Background
I've got an Ubuntu machine running on an AWS EC2 instance (Node/Express app), with its SSL certs setup using Certificate Manager and a Load Balancer. This worked fine for going to my site directly using https, e.g, https://example.com. However, using http, resulted in an insecure connection.
Checking on whynopadlock.com, I'm told my web server is not forcing HTTPS. My web server is setup using NGINX as a reverse proxy to my private IP of my EC2 instance. I've hunted around and can't quite seem to find a proper example like mine, although I've tried to piece together what I was able to find.
When I attempt to setup a force HTTPS redirect, I get ERR_TOO_MANY_REDIRECTS.
Before: Original Nginx Config
server {
listen 80;
location / {
proxy_pass http://{{MASKED_EC2_INSTANCE_PRIVATE_IP_FOR_POST}}:8000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
Notes: This config allowed https://example.com to load fine, however there was no redirect if navigating to the site using http://example.com and resulted an insecure connection.
After: NGINX Config after adding HTTPS Redirect
# HTTP
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name localhost;
return 301 https://$host$request_uri;
}
# HTTPS
server {
listen 443 default_server;
listen [::]:443 default_server;
server_name localhost;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $host;
proxy_pass https://{{MASKED_EC2_INSTANCE_PRIVATE_IP_FOR_POST}}:8000;
proxy_set_header X-Forwarded-Proto https;
}
}
Issue
I see now that when I load the domain with http, I am redirected successfully to https, however I am receiving the error ERR_TOO_MANY_REDIRECTS.
Can anyone help me understand what I'm missing or may be doing wrong in my config?
Since you are using ALB, you can redirect http to https on the ALB itself. AWS provides a guide how to set it up:
How can I redirect HTTP requests to HTTPS using an Application Load Balancer?
The process involves creating http listener and adding redirection action to it instead of regular forward rule. This way you don't have to perform any changes to your instances, as all is taken care of by the ALB.
Also since you are using AWS Certificate Manager you have to use ALB as ACM SSL cert can't be used on instance. The ACM can only be used on a load balancer (ALB, CLB or NLB), CloudFront distro or API Gateway.
im learning reverse proxy w/ nginx for the first time, and the following isnt working for me
im trying to reroute requests from http://localhost to an api server i have running at http://localhost:8080
server {
listen 80;
location / {
proxy_pass http://localhost:8080;
}
}
when i hit http://localhost, I simply get shown the welcome to nginx splash screen.
if i hit http://localhost:8080, i see my api
I have a node express service running at :8080, which i can hit manually, but shouldn't http://localhost be proxied there too?
When I setup a nginx domain that forwards requests to a node server, it looks like this, for the server_name, you can use localhost as a parameter for accessing it via localhost. You can also pass default_server to make this the default server config.
Note: Only one active config can contain default_server otherwise Nginx will throw errors.
Note: When using default_server, Nginx will catch localhost in that server config. Otherwise you need to specify localhost in the list of server_name's (separated by a space).
server {
# Setup the domain name(s)
server_name example.com;
listen 80 default_server;
# If you would like to gzip your stuff
gzip on;
gzip_min_length 1;
gzip_types *;
# Setup the proxy
# This will forward all requests to the server
# and then it will relay the servers response back to the client
location / {
proxy_pass http://127.0.0.1:8080;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_cache_bypass $http_upgrade;
}
}
Found out that adding this to my nginx.conf fixes the issue:
listen [::]:80;
For some reason listen 80; doesn't catch my http://localhost requests.
I've been able to find guides pertaining to various combinations of nginx, node, ssl, and websockets, but never all together and never on a single server.
Ultimately, this is what I'm after and I'm not sure if it's even possible:
single server (Ubuntu 14.04)
forced HTTPS (browsing to http://site forwards to https://)
node app is hosted on localhost:3000
node app uses web sockets
it's a single-page React app with no routing at all, so I don't need routes. I repeat, I'm only hosting one page with no navigation whatsoever.
With the below config, I have everything working except websockets - the client throws an error which doesn't happen if I browse straight to the node server and don't use nginx (browse to http://my.domain:3000):
bundle.js:26 WebSocket connection to 'wss://<my domain>/socket.io/?EIO=3&transport=websocket&sid=x1uQtRzF3gYYEvfIAAAi' failed: Error during WebSocket handshake: Unexpected response code: 400
server {
listen 80;
return 301 https://my/domain$request_uri;
}
server {
listen 443 ssl;
listen [::]:443;
ssl_certificate /path/cert.crt;
ssl_certificate_key /path/key.key;
ssl_session_cache shared:SSL:10m;
server_name blaze.chat;
location / {
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:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Host $host;
proxy_redirect http://localhost:3000 https://my.domain;
}
}
Right, got it working... Found a lot of articles all showing similar things but missing these key lines:
proxy_set_header Connection "upgrade";
proxy_read_timeout 86400;
In my case, websockets won't work without those lines, contrary to many other posts where similar questions were asked. Not sure what the difference was. Ironically it is listed as a requirement in the Nginx Websocket Proxying doco... Should have started there, my bad.
http://nginx.org/en/docs/http/websocket.html
Side note, I am just using this on the root path of / which works fine.
Hard to write a proper title.
I have a pure websocket application which is based on an express server. In development mode the express server does some simple routing to access the html, js and png files. Basically it is a one page app that only handle websocket protocol. But in production mode, I delegate all that to Nginx so I don't do any routing in express production. I was expecting Nginx will find all these files on its "root" directory. I get a "Cannot Get /" error however.
TL;DR version:
When I use Nginx to serve static contents for a one page app, do I need to do anything in express routing? If so, how?
UPD (my Nginx settings, can find another more detail question here):
upstream upstream_project {
server 127.0.0.1:8888;
keepalive 64;
}
server {
listen 0.0.0.0:80 default_server;
listen [::]:80 default_server ipv6only=on;
root /usr/local/share/html;
index index.html index.htm;
# Make site accessible from http://localhost/
server_name ws_server;
location / {
try_files $uri $uri/ index.html;
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;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_pass http://upstream_project;
proxy_read_timeout 240s;
}
}
UPDATED:
I have found in Nginx log that the client is trying to access the server via ipv6. See this:
kevent() reported that connect() failed (61: Connection refused) while
connecting to upstream, client: ::1, server: ws_server, request: "GET /
HTTP/1.1", upstream: "http://127.0.0.1:8888/", host: "localhost"
I remove the ipv6 server listen line (listen [::]:80 default_server ipv6only=on;) and have to change the try_files line to use file name explicitly.
try_files $uri $uri/app.js ;
Then I can get my app working. But I don't understand. Why do I have to do this?
I still can't access the static png file from the subdirectory of "root" folder. Any help would be appreciated.
NGINX supports WebSocket by allowing a tunnel to be set up between a client and a backend server. For NGINX to send the Upgrade request from the client to the backend server, the Upgrade and Connection headers must be set explicitly, as in this example:
location /wsapp/ {
proxy_pass http://wsbackend;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
Take a look on this NGINX guide for more details and examples.
So now I am serving my backend app on mysite:4300 and my static site on mysite:80. This is okay but causes a few problems, one being SSL I would have to get two signed certificates, at least I think.
Another problem which is CORS, it's not a big issue my express app is configured to allow CORS, but I would like to serve it all under one origin.
Here is how my nginx config looks.
I created inside /etc/nginx/conf.d/mysite.com.conf
server {
listen 80;
server_name mysite.com;
location / {
proxy_pass http://localhost:3100; //node js port
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
So basically the above allows me to serve my nodejs app (running with forever.js) for port :3100 on port :80.
This hijacks my static site, obviously but I was wondering how I could possibly configure it to serve on mysite.com/myApp
My Question
How do I configure nginx to serve as a proxy not to mysite.com:80 but mysite.com:80/myApp so I can serve my static website on mysite.com:80?
Do I need to rethink how I am using the proxy, or is there a configuration method I can use?
P.S Following this tut https://www.digitalocean.com/community/tutorials/how-to-host-multiple-node-js-applications-on-a-single-vps-with-nginx-forever-and-crontab
Maybe I need to configure DNS records, or create a subdomain?
Solution: I ended up using a subdomain, but I think it's pretty much the same concpet.
Thanks to #Peter Lyons I have this server block
server {
listen 80;
server_name app.mysite.com;
location / {
root /var/www/mySite/public_html;
proxy_pass http://localhost:3100;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
location #app {
proxy_pass http://localhost:3100;
}
}
It wasn't working until I added a root and location #app so now it works fine on port:80 so no more having a port number exposed in the url. Hopefully I can setup SSL for this now!
I think I am going to try and serve it like this mysite.com/myApp to test it, might be handy in the future.
P.S I may also avoid using the subdomain, because it still is considered Cross origin Are AJAX calls to a sub-domain considered Cross Site Scripting?
I may want to allow my app to communicate with my site, and avoiding CORS might make it easier. That is if mysite.com/myAPP is not considered CORS either. We will see.
Try: proxy_pass http://localhost:3100/myApp$uri;, which I think should do what you want.
When I want nginx to serve static files, I use try_files like this:
location / {
root /path/to/my/app/wwwroot;
try_files $uri $uri.html $uri/index.html #app;
}
location #app {
proxy_pass http://localhost:3100;
}