Angular JS - can't receive any response using $http.post

Question

I'm trying to get a response from a web service using Angular JS, which I can perfectly reach via my shell using a simple curl command:

curl --header "Content-type: application/json" --request POST 
     --data '{"username": "name", "password": "pwd"}' 192.168.2.1:9000/ws/login

However, when I try to reach it using Angular with an $http.post I experience some "funny" behaviour.

While my data are:

    var url = "192.168.2.1:9000/ws/login"
    var postData = {
        username: un,
        password: pwd
    }

I've tried both postData as a JSON object and as a stringified JSON

Using a call like this:

    $http.post( url, postData ).
        success(function(data) {
        console.log(data)
        }).
        error(function(data, status, headers, config) {
            console.log(data, status, headers, config)
        })

or even

    $http({
        url: url,
        method: 'POST',
        data: JSON.stringify(postData),
        headers: {'Content-type': 'application/json'}
        }).
        success(function(data, status, headers, config) {
            console.log('Success: ', data, status, headers, config)

        }).
        error(function(data, status, headers, config) {
            console.log('Error: ', data, status, headers, config)

        })

Simply do nothing.
Nothing at all!

Prepending an http:// to the url instead, gives me:

OPTIONS http://192.168.2.1:9000/ws/login 404 (Not Found) angular.js:7073
OPTIONS http://192.168.2.1:9000/ws/login Origin http://localhost:9000 is not allowed by Access-Control-Allow-Origin.

I'm really really lost... any advice would be much appreciated!

What if you run the server locally on the same box you are making the post? Have you tried not adding `headers`? — Foo L, Oct 28 '13 at 17:55
I think you answered the question yourself... OPTIONS http://192.168.2.1:9000/ws/login Origin http://localhost:9000 is not allowed by Access-Control-Allow-Origin. Your web service is running on http://192.168.2.1:9000 while your angular app is running on http://localhost:9000. You cannot make AJAX requests to a different site (combination of scheme:host:port). Read more here: https://en.wikipedia.org/wiki/Same-origin_policy You may need to do something like this: http://better-inter.net/enabling-cors-in-angular-js/ — Adam, Oct 28 '13 at 18:36

score 1 · Accepted Answer · edited May 23 '17 at 12:21

I've managed to get a CORS setup up & running.

The server side for my case was far from trivial, since we're using Play! framework and modern browsers sends an OPTION method before sending the real POST method, to be somewhat "pre-authorized" to send the CORS request.

As stated in http://better-inter.net/enabling-cors-in-angular-js/ I had to add

        $http.defaults.useXDomain = true;

prior of the actual $http.post, but I didn't had to delete the 'Content-Type' header

Should you ever use a similar setup, I would reccomend taking a look on these resources:

Play 2.0.1 and setting Access-Control-Allow-Origin
Play! 2.0 easy fix to OPTIONS response for router catch-all?

score 0 · Answer 2 · answered Oct 28 '13 at 18:50

0

As Adam said!

If you are using apache:

 Header set Access-Control-Allow-Origin:  http://domain.com, http://localhost/

or just

Header set Access-Control-Allow-Origin: *

Do this only for testing. For production limit the origin to only your domain.

answered Oct 28 '13 at 18:50

@Adam Indeed it's a SAME-ORIGIN issue, the first 404 mislead me. However, I need to deal with this issue in some way, since it's not possibile for my case to have the web services and the same server of angular. ATM I'm using python SimpleHTTPServer to test my angular app, though i doubt I can configure the ORIGIN headers. It is possibile to suppress the header sending or something like that (as Adam suggested with django)? – domokun Oct 28 '13 at 20:22

Angular JS - can't receive any response using $http.post

2 Answers2