AngularJS REST API problems

Question

I'm trying to recive data from REST API using POST. I created controller that should make POST request.

function LoginCtrl($scope, $http, $rootScope) {
$scope.login = function () {
    var form = {};
    form.user = $scope.name;
    form.pwd = $scope.password;
    $http({
        method: 'POST',
        url: serverUrl+'/login',
        data: $.param(form),
        headers: {
            'Content-type': 'application/json'
        }
    })
    .success(function(data, status, headers, config) {
        //success
    })
    .error(function(data, status, headers, config) {
        //error
    });
}

When I run this code, browser creates OPTIONS request and show Access-Control-Allow-Origin (see below). My API only work with POST requests and require Content-type header set to application/json.

But when I change Content-type to application/x-www-form-urlencoded browser make POST request, but still I see error:

XMLHttpRequest cannot load http://nimoz.asi.pl:8080/api/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

How to set Content-type header to application/json, keep POST method and avoid Access-Control-Allow-Origin error?

I use AngularJS version 1.2.10.

EDIT: When I test API on DEV HTTP CLIENT (Chrome extension), request work: http://scr.hu/277/hfwby

Geoff Genz · Accepted Answer · 2014-02-04 00:17:19Z

1

This is not a problem with angular, this is a problem with your server. Your browser will not send a request to a server that is on a different domain or port or protocol than the page you're making the request from.

The OPTIONS request and the headers it passes like the Access-Control-Allow-Origin header are part of the CORS protocol. You should research how to implement CORS in your server API. Most web servers contain plugins or the equivalent to automatically allow CORS.

See Wikipedia here for some background on CORS: http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

answered Feb 4, 2014 at 0:17

Geoff Genz

2,16919 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Raul Nohea Goodness Over a year ago

To add, modern browsers will send an OPTIONS request to a cross-domain url first, before the real POST (or whatever). This is called a pre-flight request. Your server should send the Access-Control-Allow* headers if it is allowed. Then the JS library will send the 'real' POST request.

Max · Accepted Answer · 2014-02-04 00:14:42Z

0

It's CORS restriction. If ypu have an access to server add header to required page: Access-Control-Allow-Origin: *

If not use JSONP. Here is Angular Docs

answered Feb 4, 2014 at 0:14

Max

1,84413 silver badges22 bronze badges

1 Comment

user2066411 Over a year ago

So, why when I test API in Chrome extension, everything work? Extension also create requests from localhost.

Collectives™ on Stack Overflow

AngularJS REST API problems

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related