0

I have created a web application in AngularJS and a Flask server up and running on localhost:5000/. I wanted to make a login service, so I included the following code in my controller in AngularJS:

$scope.login = function() {
            $http({
              method: 'POST',
              data: {
                username: $scope.username,
                password: $scope.password
              },
              url: 'http://127.0.0.1:5000/login/'
            }).then(function successCallback(response) {
                console.log('successCallback')
              }, function errorCallback(response) {
                console.log('errorCallback')
              });
}

I call the login() method from the UI. But this gives me the following error:

XMLHttpRequest cannot load http://127.0.0.1:5000/login/. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Further when I researched on this error, I found this link, which states that my page is on a different domain than my server. How do I bring my AngularJS and python server on same domain? What piece of code will I have to specify so that in place of url:'http://127.0.0.1:5000/login/', I just have to specify '/login'? I know this might be trivial question, but please guide me.

Community
  • 1
  • 1
psr
  • 2,619
  • 4
  • 32
  • 57
  • Have you tried accessing your app from `http://127.0.0.1:5000/` rather than `http://localhost:5000/`? While they both lead to the same location, from the browser's perspective they're separate domains. – Joe Clay Jul 18 '16 at 15:32
  • Yes, I have tried both, same output in browser when I open the links, and same error in making the post call through Angular $http method – psr Jul 18 '16 at 15:40

1 Answers1

0

Change app.run in flask code and your url all to 127.0.0.1 and then browse 127.0.0.1, then it will work.

zs2020
  • 53,766
  • 29
  • 154
  • 219