How to deal with preflight response in cors

Question

0.00/5 (No votes)

See more:

C#

Error : Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

Hi I am using Web API with VS 2010 and MVC application with json. I am trying to consume my api hosted on diff. port via angular $http. But I am receiving the above error, I looked on internet but could not get what to do resolve it.

# Web API code:
In Global.asax file

C#

protected void Application_BeginRequest()
        {
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "http://localhost:52298");

            if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
            {
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Method", "OPTIONS, GET, POST, PUT, DELETE");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Header", "accept, content-type"); //
                HttpContext.Current.Response.End();
            }
        }

C#

[HttpPost]
        public int SaveClient(string ClientObj)
        {
            if (ClientObj == null)
                return -2;

            return 1;
            
        }

#Angular Code:

JavaScript

$scope.ClientObj.ClientID = 0;
        $scope.ClientObj.ClientName = $scope.clientName;
        $scope.ClientObj.Description = '';
        $scope.ClientObj.ClientType = $scope.clientType;
        $scope.ClientObj.ClientAddress = $scope.clientAddress;
        $scope.ClientObj.Email = $scope.clientEmail;
        $scope.ClientObj.Phone = $scope.clientPhone;
        $scope.ClientObj.IsActive = true;
        $scope.ClientObj.CreatedBy = 0;
        console.log($scope.ClientObj);
        var a = JSON.stringify($scope.ClientObj);
        console.log(a);

        $http({
            url: 'http://localhost:54212/api/Client/SaveClient/'
            , method: 'POST'
            , data: 'hello' //$scope.Clientobj
            , header: {'content-type':'application/text'}
        }).success(function (response) {
            console.log('success', response);
            alert(response);
        }).error(function (error) {
            console.log('error');
            alert(error);
        });

Thanks

Posted 27-Nov-15 20:52pm

Manish Kumar Namdev

Updated 17-Dec-15 0:04am

Suvabrata Roy

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

*Suvabrata Roy* · Answer 1 · 2015-12-17T00:08:00

During the preflight request, you should see the following two headers: Access-Control-Request-Method and Access-Control-Request-Headers. These request headers are asking the server for permissions to make the actual request. Your preflight response needs to acknowledge these headers in order for the actual request to work.

For example, suppose the browser makes a request with the following headers:

Origin: http://yourdomain.com

XML

Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-Custom-Header

Your server should then respond with the following headers:

Access-Control-Allow-Origin: http://yourdomain.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: X-Custom-Header
Pay special attention to the Access-Control-Allow-Headers response header. The value of this header should be the same headers in the Access-Control-Request-Headers request header, and it can not be '*'.

Once you send this response to the preflight request, the browser will make the actual request. You can learn more about CORS here: http://www.html5rocks.com/en/tutorials/cors/

Referance : http://stackoverflow.com/questions/8685678/cors-how-do-preflight-an-httprequest[^]