CODEWITHSUNDEEP
javascriptangularjshttp-headerscors
Tom Hadkiss
Tom Hadkiss

Reputation: 267

AngularJS Content-Type header not added

The following code sends a request and receives a response perfectly using CORS protocol. I would like to change the content-type header to be 'application/json' instead of 'application/x-www-form-urlencoded'. However, when I replace the content type with 'application/json' the request fails. When I inspect the request in the browser I can see that the content-type header has been removed instead of changed.

var servicesApp = angular.module('services', [])

    .config(function($httpProvider){

        /* Enable CORS */
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common['X-Requested-With'];
})


.factory('model', function($http) {

        var testJSON = '{"employees": [ {"firstName":"John", "lastName":"Doe"} ] }';

        $http({
            url: 'http://127.0.0.1:8081/controller/UIController',
            method: "POST",
            params: {"path" : "save"},
            data: "message= " + testJSON,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}

        }).success(function (data, status, headers, config) {
            alert(data.ExampleForm[1]);

        }).error(function (data, status, headers, config) {
            alert(status);
        });

Request From Code Above

Request URL:http://127.0.0.1:8081/controller/UIController?path=save

Request Method:POST

Status Code:200 OK

Request Headersview source

Accept:application/json, text/plain, */*

Accept-Encoding:gzip,deflate,sdch

Accept-Language:en-GB,en-US;q=0.8,en;q=0.6

Connection:keep-alive

Content-Length:67

Content-Type:application/x-www-form-urlencoded

Host:127.0.0.1:8081

Origin:http://127.0.0.1:8020

Referer:http://127.0.0.1:8020/TwineClient/src/index.html

User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.107 Safari/537.36

Query String Parametersview sourceview URL encoded

path:save

Form Dataview sourceview URL encoded

message: {"employees": [ {"firstName":"John", "lastName":"Doe"} ] }

Response Headersview source

Access-Control-Allow-Headers:Content-Type

Access-Control-Allow-Methods:POST

Access-Control-Allow-Origin:*

Content-Length:51

Content-Type:application/json;charset=ISO-8859-1

Date:Tue, 11 Feb 2014 16:15:00 GMT

Server:Apache-Coyote/1.1

When 'application/x-www-form-urlencoded' is replaced with 'application/json':

Request URL:http://127.0.0.1:8081/controller/UIController?path=save

Request Method:OPTIONS

Status Code:200 OK

Request Headersview source

Accept:*/*

Accept-Encoding:gzip,deflate,sdch

Accept-Language:en-GB,en-US;q=0.8,en;q=0.6

Access-Control-Request-Headers:accept, content-type

Access-Control-Request-Method:POST

Connection:keep-alive

Host:127.0.0.1:8081

Origin:http://127.0.0.1:8020

Referer:http://127.0.0.1:8020/TwineClient/src/index.html

User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.107 Safari/537.36

Query String Parametersview sourceview URL encoded

path:save

Response Headersview source

Allow:GET, HEAD, POST, TRACE, OPTIONS

Content-Length:0

Date:Tue, 11 Feb 2014 16:11:02 GMT

Server:Apache-Coyote/1.1

Upvotes: 1

Views: 2928

Answers (1)

Ray Nicholus
Ray Nicholus

Reputation: 19890

The browser is sending a preflight (OPTIONS) request when you change the content-type to application/json. This is a required step according to the CORS spec. Your server will need to properly acknowledge this preflight if you want to use application/json as your request content-type. You can read more about CORS here: https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS.

This is a FAQ on SO, and I've answered a similar question here: WebAPI 2 - CORS not working with contentType application/json.

Upvotes: 1

Related Questions