Handling POST request and redirecting with AngularJS and Python Flask

Question

I've been working on a simple website project using AngularJS and Flask . It's a shop where the user checks what products they want to purchase and when they place their order everything is saved in a postgresql database and the user is redirected to the appropriate page (shipping done or shipping failed due to some issue). I'm using try-except to handle possible errors in the storing process and I can't manage to redirect the user to the appropriate url. After the values are inserted to the database nothing happens. I'm using ng-view inside main.html .

Here is my server.py :

@app.route('/')
def mainPage():
    return current_app.send_static_file('main.html')

@app.route('/shipping')
def shippingPage():
    return current_app.send_static_file('main.html')

@app.route('/shippingfailed')
def shippingFailedPage():
    return current_app.send_static_file('main.html')

@app.route('/placeorder', methods=['GET','POST'])
def placeOrder():
    try:
        data = request.get_json()
        productsBought = data.pop('products')

        order = orders(**data)
        session.add(order)
        session.flush()

        mydict = {}
        mydict["orderno"] = order.orderno
        for product in productsBought:
            mydict["productno"] = product
            details = orderdetails(**mydict)
            session.add(details)
            session.flush()

        session.commit()
        return redirect(url_for('shippingPage'))

    except Exception:
        session.rollback()
        raise
        return redirect(url_for('shippingFailedPage'))

    finally:
        session.close()

Here is my app.js :

angular.module('shoppingCart', ['ngRoute'])
.config(['$routeProvider', '$locationProvider',
        function($routeProvider, $locationProvider) {
  $locationProvider.hashPrefix('');
  $routeProvider
  .when('/', {
    templateUrl: 'static/cart.html'
  })
  .when('/cart', {
    templateUrl: 'static/cart.html'
  })
  .when('/checkout', {
    templateUrl: 'static/checkout.html'
  })
  .when('/shipping', {
    templateUrl: 'static/shipping.html'
  })
  .when('/shippingfailed', {
    templateUrl: 'static/shippingfailed.html'
  });
}])
.controller('cartCtrl', ['$scope', '$http', '$filter', function($scope, $http, $filter){
this.placeOrder = function(){
    vm.customer.price = $filter('calculateTotal')(this.cartItems);
    this.jsonCustomer = JSON.stringify(vm.customer);
    $http.post('/placeorder', this.jsonCustomer, {headers: {'Content-Type': 'application/json'} });
  }
}])

Here is my checkout.html :

  <div class="text-right">
    <a type="button"
       class="btn btn-danger"
       ng-if="vm.cartItems.length !=0"
       ng-click="vm.placeOrder()"
       href="#/placeorder">Place Order</a>
  </div>

So, to sum it up a little bit more, the expected behavior is when the user is on checkout.html and they click on Place Order they are redirected to /placeorder , then the server handles the POST request inside try-except and redirects them according to that.

Answer 1

You should not return redirect in your API endpoint in flask. Instead return a URL to redirect to, then inspect the results of your POST and redirect in your frontend app.