I am developing my website in java and react. I loaded my site onto a virtual machine and brought it up. Communication between the client part and the server part occurs using nginx. nginx configuration

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    access_log  /var/log/nginx/access.log  main;
    sendfile        on;
    keepalive_timeout  65;
    gzip  on;

    server {
        listen 80;

        # Example of reverse proxy, separate front end and back end
        location /authApi {

            resolver 127.0.0.11 valid=30s; # Docker DNS
            proxy_pass http://auth:8080/authApi;
            proxy_redirect default;
        }

        location /accountApi {

            resolver 127.0.0.11 valid=30s; # Docker DNS
            proxy_pass http://account:8081/accountApi;
            proxy_redirect default;
        }

        location /taskApi {
            resolver 127.0.0.11 valid=30s; # Docker DNS
            proxy_pass http://task:8082/taskApi;
            proxy_redirect default;
        }

        location / {
            resolver 127.0.0.11 valid=30s;
            proxy_pass http://frontend:3000;
            proxy_redirect default;
        }
    }
}

Disable CORS in java

@Bean
    @SneakyThrows
    public SecurityFilterChain securityFilterChain(HttpSecurity http) {
        return http.cors(Customizer.withDefaults()).csrf(AbstractHttpConfigurer::disable)
                .authorizeHttpRequests(request -> request
                        .requestMatchers(HttpMethod.OPTIONS, "/**").permitAll()
                        .anyRequest().permitAll()
                )
                .build();
    }

All controllers are marked with the @CrossOrigin annotation

Login page in React

const Login = (props) => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [errorMessage, setErrorMessage] = useState('');
    const [showErrorPopup, setShowErrorPopup] = useState(false);
    const navigate = useNavigate();

    const handleSubmit = async (event) => {
        event.preventDefault();
        setEmail('')
        setPassword('')
        try {
            const response = await axios.post(props.url + "/authApi/login", 
            { email: email, password: password })
            Cookies.set('token', response.data.message)
            navigate('/')
        } catch (error) {
            setShowErrorPopup(true)
            console.log(error)
            console.log(error.response)
            setErrorMessage(error.response.data.message)
        }
    };

    const handleRegisterRedirect = () => {
        navigate('/registration');
    };

    const closeErrorPopup = () => {
        setShowErrorPopup(false);
    };

    return (
        <div className="login-container">
            <Helmet>
                <title>Login</title>
            </Helmet>
            <header className="login-header">LOGIN</header>
            <form className="login-form" onSubmit={handleSubmit}>
                <div className="form-group">
                    <label>Email</label>
                    <input
                        type="email"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        required
                    />
                </div>
                <div className="form-group">
                    <label>Password</label>
                    <input
                        type="password"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                        required
                    />
                </div>
                <button type="submit">Login</button>
                <div className="register-link">
                Don't have an account yet? <a href="/registration" onClick={handleRegisterRedirect}>Register</a>
                </div>
            </form>
            {showErrorPopup && (
                <div className="error-popup">
                    <div className="error-popup-content">
                        <span>{errorMessage}</span>
                        <button onClick={closeErrorPopup}>Close</button>
                    </div>
                </div>
            )}
        </div>
    );
};

export default Login;

When I click on the login button and send a request to http://auth:8080/authApi/login I get an error
error

Сan I fix this error without changing the server to https? I tried adding headers Access-Control-Allow-Origin *, Access-Control-Allow-Private-Network: true in my nginx, it doesn`t work. I also know that you can disable the flag in Google, but this only solves the problem locally. Perhaps I can somehow configure nginx so that it sends requests to the server not from ip 176.109.106.164, but from ip 127.0.0.1, for example?