Flask server blocking requests from NJS app (all running locally)

[west tulip]

Howdy all,
I'm currently trying to implement a Flask server as a backend to my NJS app, and I'm tryna make it so that when we present our app in a public setting, even if people get access to the api backend url, they're not able to access the backend. For now, I'm using an ip whitelist, and when I try to do a request to the server from the frontend, I'm getting blocked. I tried http://localhost:3000 and 127.0.0.1, but I'm blocked on both. I'll post the code for the FE and BE in a new comment here.

[neat gulch]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[west tulip]

'use client';
import React, { useState, useEffect } from 'react';

function Home() {
    const [content, setContent] = useState('');
    const [connectionStatus, setConnectionStatus] = useState(false);
    const statusClass = connectionStatus ? "text-success" : "text-failed";

    useEffect(() => {
        fetch('http://192.168.2.6:8080/')        // THIS IP ADDR IS THE ADDRESS OF THE BACKEND SERVER @ PORT 8080
            .then(response => response.text())
            .then(data => {
                setContent(data);
            })
            .catch(error => {
                console.error('Error fetching content:', error);
            });

        return () => {
            if (content) {
                setConnectionStatus(true)
            } else {
                setConnectionStatus(false)
            }
            
        };
    }, []);

    return (
        <>
            <div className="p-2">
                <div className="section_title">
                    connection to the backend: <div className={`connection_status inline ${statusClass}`}>{connectionStatus.toString()}</div>
                </div>
                <div dangerouslySetInnerHTML={{ __html: content }}></div>
            </div>
        </>
    );
}

export default Home;

from flask import Flask, jsonify, make_response, request, abort
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

trusted_ips = ['192.168.2.6', '127.0.0.1']       # THIS SET OF IP ADDRS ARE ON THE WHITELIST DURING THE EVENT (THE FIRST IS MY COMPUTER IP ADDR)

@app.before_request
def limit_remote_addr():
    if request.remote_addr not in trusted_ips:
        abort(403)

@app.route('/')
def hello_world():
    return "<h1>Hello, World!</h1>"

if __name__ == "__main__":
    app.run(debug=True, port=8080)

top: NJS FE
bottom: Flask BE

My main question is: is there a fix to this/am I using the wrong ip addrs on the whitelist? (also, for now I don't need total security, hence why I'm not using something like NGINX, because this backend is just a testnet, and when I actually launch the product, I'm gonna make a new backend)

[livid cradle]

It's a local IP, there's no problem showing it

[west tulip]

yeah true, forgot bout what can/cannot be shown, lemme edit it

oh wat there's somehow two addrs

a 0.105 and 0.6

[livid cradle]

'use client';
import React, { useState, useEffect } from 'react';

function HomeRoute() {
    const [content, setContent] = useState('');
    const [connectionStatus, setConnectionStatus] = useState(false);
    const statusClass = connectionStatus ? "text-success" : "text-failed";

    useEffect(() => {
        fetch('http://192.168.2.6:8080/')
            .then(response => response.text())
            .then(data => {
                setContent(data);
                setConnectionStatus(true);
            })
            .catch(error => {
                console.error('Error fetching content:', error);
                setConnectionStatus(false);
            });
    }, []);

    return (
        <>
            <div className="p-2">
                <div className="section_title">
                    connection to the backend: <div className={`connection_status inline ${statusClass}`}>{connectionStatus.toString()}</div>
                </div>
                <div dangerouslySetInnerHTML={{ __html: content }}></div>
            </div>
        </>
    );
}

export default HomeRoute;

try

[west tulip]

I managed to get it to work by adding that 0.105 to the whitelist

just gotta figure out where that ip addr came from

[livid cradle]

ah ok