Next.js Discord

Discord Forum

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

Answered
9662e103-129a posted this in #help-forum
Open in Discord
9662e103-129aOP
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.
Answered by 9662e103-129a
I managed to get it to work by adding that 0.105 to the whitelist
View full answer

11 Replies

9662e103-129aOP
'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)
9662e103-129aOP
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
Spectacled bear
'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
9662e103-129aOP
I managed to get it to work by adding that 0.105 to the whitelist
Answer
9662e103-129aOP
just gotta figure out where that ip addr came from
Spectacled bear
ah ok