AngularJS request header field Content-Type is not allowed by Access-Control-Allow-Headers

There is no problem with the JSON format.

The error ..

  

Request header field Content-Type is not allowed by Access-Control-Allow-Headers.

.. occurs when the server does not report that it supports the header Content-Type in a Cross-Origin request. This is a security feature offered by all browsers, called Policy of the Same Origin . The intention of this feature is to prevent you from accessing another server using XMLHttpRequest unless the second server explicitly allows it for your site, http method and headers included. Without this any page you visit could access your email (to mention an example).

If you look at the console, you will see that before the error, the browser sends an OPTIONS request (known as preflight) and that the header does not include this header:

Access-Control-Allow-Headers: Content-Type

As the server pliskin12.ddns.net:8080 does not send this header in the response to OPTIONS due to its configuration of CORS (Cross-Origin-Resource-Share) the browser interrupts the request, does not send the POST and shows the error you see.

There are different ways to skip the Policy of the same origin.

Enable CORS

Enable explicitly on server pliskin12.ddns.net:8080 header Content-Type , how to do this depends on the server software used. It is not the same to configure it in IIS, NodeJs or Apache. But it consists in telling the server that I sent the above-mentioned header in the response to OPTIONS (this will enable the browser to send the POST)

To enable it, you must be (or have access to) a server administrator.

Use JSONP

Instead of making a request XMLHttpRequest you can use JSONP . JSONP is a technique designed to meet the limitation of AJAX between domains.

To use JSONP, the remote server must support it.

A JSONP request is done in AngularJS: (notese callback = JSON_CALLBACK)

var url = 'pliskin12.ddns.net:8080/taller-db-11/usuarios/login?callback=JSON_CALLBACK';    
$http.jsonp(url).
    success(function(data, status, headers, config) {
        // exito
    }).
    error(function(data, status, headers, config) {
        // error
    });

See the documentation for $http.jsonp for angular.

Conclusions

This is done to protect you, but when you are a programmer it can become a problem. My recommendation is that you try to enable the header for CORS on the server, in the second instance you try JSONP.

Regarding your comment try to send in json in this way

var Informacion = {
    "usename":"tuUsername",
    "password":"tuPassword"
};

If you do not try to do it in this other way:

// headers por default
$http.defaults.headers.post['Content-Type'] = 
    'application/x-www-form-urlencoded;charset=utf-8';
// envio de los datos
$http({
    method: 'POST',
    url: 'https://example.com/user/login',
    data: $.param({
        "username": "tuUsername",
        "password":" tuPass"
    }),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function (data, status, headers, config) {
    console.log(data)
}).error(function (data, status, headers, config) {
    console.log(data)
});

I hope you greetings work.

note: to use $.param({}) you need to instantiate JQuery , you can do it by copying the CDN from here.