.
.
PostsComments
RRailway
Created by . on 11/7/2023 in #✋｜help
NGINX Reverse proxy
Description: -Frontend URL: https://frontend.com -Frontend is a React App hosted on railway -Backend URL: https://backend.com -Backend is being hosted locally since I need my GPU for ML model. -Backend is ngrok http tunnel (static domain) => localhost:80 (dockerized nginx on my PC) then reverse proxy into another docker container, which is on the same docker-network and is running nodejs server. -Nodejs server uses express-session, and passport with google-oauth-strategy20. A normal request from frontend to backend looks like: https://frontend -> https://backend (ngrok url) -> http://localhost:80 (nginx on local computer) -> http://backend-container:8800 (nodejs server in same docker network as nginx) Problem: The app works fine when I use cross-site requests from my frontend to my backend. Ex: -I am redirected to google login using this route 
 <a href=https://backend/login/google> ... </a> 
 <a href=https://backend/login/google> ... </a>
After logging in, redirected back to frontend with a cross site cookie from backend. I am then able to authenticate normally with my server. -check for a user 
 fetch(https://backend/exists, {method:post, credentials:true}) 
 fetch(https://backend/exists, {method:post, credentials:true})
The issue is that on browsers that block third party cookies, the authentication system breaks (ex: Safari mobile). How can I rearrange my project so my requests are no longer cross-origin? I've tried to create a nginx proxy in the same container as my frontend, and route /api to the backend. Ex: 
 
    listen 80;

    location /api {
        proxy_set_header Host $host;
        proxy_pass http://backend;
        proxy_set_header Cookie $http_cookie;
    }

    location / {
        proxy_set_header Host $host;
        proxy_pass http://localhost:3000 #React frontend;
    }
 
    listen 80;

    location /api {
        proxy_set_header Host $host;
        proxy_pass http://backend;
        proxy_set_header Cookie $http_cookie;
    }

    location / {
        proxy_set_header Host $host;
        proxy_pass http://localhost:3000 #React frontend;
    }
Then from frontend, send requests like: 
fetch(/api/exists, {credentials: true, method: post}) 
fetch(/api/exists, {credentials: true, method: post}) 
<a href="/api/login/google">...</a>
<a href="/api/login/google">...</a>
I'm not sure If conceptually what I'm doing makes any sense, but "/api" routes dont work. Please help!
11 replies