POST method with json object[angular JS] can't able to send through API. The api developed by using .NET rest service.

Question

0.00/5 (No votes)

See more:

Actaully I was working in angular JS. Initially it is not allowed even the get method also . thats way i added some config settings like below. this is only working for GET, POST Method not working . Please help me.

I added follow code in Web.Config within the <system.server> element.

XML

<httpProtocol>
      <customHeaders>
        <!-- Begin this is for angularJS configuration  -->
      <add name="Access-Control-Allow-Origin" value="*"/>
      <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
        <!-- End this is for angularJS configuration  -->
      </customHeaders>
    </httpProtocol>

What I have tried:

I didn't tried for the post method.

Posted 27-Mar-16 23:41pm

Member 12371381

Updated 28-Mar-16 3:00am

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)

Sunasara Imdadhusen · Answer 1 · 2016-03-28T03:00:00

Solution 1

You can use following in your Global.asax.cs file:

C#

protected void Application_BeginRequest(object sender, EventArgs e)
        {           
            if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
            {
                //These headers are handling the "pre-flight" OPTIONS call sent by the browser
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
                HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
                HttpContext.Current.Response.End();
            }
        }

Posted 28-Mar-16 3:00am

Sunasara Imdadhusen

Comments

Member 12371381 29-Mar-16 8:25am

i tried this but sttill i have a same issue.

i was getting foloowing isssue:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:42165/Service1.svc/GetData. (Reason: CORS preflight channel did not succeed).

i tried code like this.

var formEmployeeModule = angular.module("formEmpMod", []).controller("testcont",function($scope,$http) {
$scope.testMessage = "test message";

var compositeType = new Object();
compositeType.BoolValue = false;
compositeType.StringValue = "This is nanaji";

$scope.GetDataFromDb = $http({
ContentType: "application/json;charset=utf-8",
method: "POST",
processData: true,
crossDomain: true,
cache: false,
async: true,
dataType : 'jsonp',
url: "http://localhost:42165/Service1.svc/GetData",
// params: { value: '123'}
data:{composite:compositeType}
//http://localhost:42165/Service1.svc/GetData?value=123

}).then(function sucessCallBack(response) {

alert(response.data);
alert('this is sucess call black');
}, function errorCallback(response) {
alert(response.data);
alert('this is Failure call black');
} );

});

Rest service Server Web.Config:

<httpprotocol>
<customheaders>

<add name="Access-Control-Allow-Origin" value="*">
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS">
<add name="Access-Control-Max-Age" value="1728000">
<add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Access-Control-Allow-Origin">



In client Application Global.Asax file

protected void Application_BeginRequest(object sender, EventArgs e)
{

HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
{
//These headers are handling the "pre-flight" OPTIONS call sent by the browser
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Access-Control-Allow-Origin");
HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
HttpContext.Current.Response.End();
}
}