Getting a not found error on Flask routing?

Question

I tried everything but the route just doesn't seem to work. I'm new to flask and I am running it locally. Also, my angular js code gives a 404 on posting the data to flask as the route doesn't seem to exist.

app.py

@app.route('/')
@app.route('/index')
def IndexPage():
    return render_template('index.html')

#these routes don't work although all of the others do which is very confusing
@app.route('/misc')
@app.route('/contact/mama')
def printHello():
    return render_template('index.html')


@app.route('/contact')
def ContactPage():
    return render_template('contact.html')


@app.route('/about')
def AboutPage():
    return render_template('about.html')


if __name__ == '__main__':
    app.run()

Here is my angular code and the python script trying to handle the post request

var formApp = angular.module('formController', []);
formApp.controller("formControl", function($scope,$http) {
    alert("mama");
    $scope.FormSubmit = function ()
    {
        alert("In the function");
        var data =
            {
            name : $scope.user.name,
            phone : $scope.user.phone,
            email : $scope.user.email,
            message : $scope.user.message
            };
        var result = $http.post('contact/userData', data, null);
        result.success(function(response)
        {
            const message = response.status;
            alert(message)
            alert("Thanks for contacting us");
        });
        result.error(function(data, status, headers, config)
        {
            console.log(result)
            alert("Error while submitting data");
        });
        $scope.user.name = '';
        $scope.user.phone = '';
        $scope.user.email = '';
        $scope.user.message = '';
    };
});

and here is the python script to handle the request

import sys import app import json from flask import request

@app.route("/contact/userData", methods=['GET','POST'])
def SendMail():
    message = json.dump({'status': 'success'})
    return message

Answer 1

You haven't defined contact/userData as an endpoint, define that in app.py and you should be good to go, or at least you'll get a more helpful error.

Answer 2

This happens because probably your Flask app is running as a different endpoint as your Angular app. So, for example, your browser will request your app at http://localhost:8080/ and the angular app will request for a service at http://localhost:5000/ and this is not allowed by default. You need to enable CORS in your flask or as my preferred solution, to create a proxy in your angular environment:

1. Create a file proxy.conf.json at the root folder of your ng project

{
    "/vat/api": {
        "target": "http://localhost:5000/",
        "secure": false
    }
}

2. Run your ng app with

ng serve --open --proxy-config proxy.conf.json

Answer 3

json.dumps() was causing a problem. Changed it to jsonify method and the code started working.

Answer 4

I am using VS Code and because the Python (pylance) extension was enabled, my import statement for routes (from routes import *) kept going to top because it was the default action of the extension. Disabling the extension did the trick for me.

This is because the import has to be only after app (app = Flask(name)) and db (db = SQLAlchemy(app)) have been initialized.