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


Starting to use Angular JS and I need to make a post request to a server. I am making the request in the following way:

var Informacion= JSON.parse('{"username":"--","password":"--"}')

$'http://--:8080/taller-bd-11/usuarios/login', Informacion, {
    headers: { 'Content-Type': 'application/json' }
.success(function(data, status, headers, config) {
.error(function(data, status, headers, config) {


The problem is that when I make the request I get the following error message in the browser:

    LIVERELOAD: connecting to server  
    LIVERELOAD: successfully connected  
    XMLHttpRequest cannot load {url}. Request header field Content-Type is not allowed by Access-Control-Allow-Headers.

From what I understand it is as if the JSON object I am sending was not in the JSON format

asked by JuanRoa 21.12.2015 в 07:35

2 answers


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 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 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.


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 = '';    
    success(function(data, status, headers, config) {
        // exito
    error(function(data, status, headers, config) {
        // error

See the documentation for $http.jsonp for angular.


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.

answered by 21.12.2015 / 14:19

Regarding your comment try to send in json in this way

var Informacion = {

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

// headers por default
$['Content-Type'] = 
// envio de los datos
    method: 'POST',
    url: '',
    data: $.param({
        "username": "tuUsername",
        "password":" tuPass"
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function (data, status, headers, config) {
}).error(function (data, status, headers, config) {

I hope you greetings work.

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

answered by 21.12.2015 в 07:44