CODEWITHSUNDEEP
javascriptc#angularjsasp.net-web-apicors
Jordan
Jordan

Reputation: 327

Error when using POST in AgularJS to .net WebAPI

I am currently having an issue with my AngularJS and my .net WebAPI. I can successfully get content or objects through my WebAPI, however I am currently experiencing issues POSTING data.

The errors that I get when trying to post the content is as follows:

OPTIONS http://localhost:18130/api/Products XMLHttpRequest cannot load

http://localhost:18130/api/Products. Response for preflight has invalid HTTP status code 405

Bear in mind that when I try to post using Fiddler it works absolutely fine, no issues whatsoever.

The following is my AngularJS code I am using to post: 

var data = { "Title": $scope.title, "Description": $scope.description };

$http.post(
    'http://localhost:18130/api/Products',
     JSON.stringify(data), {
         headers: {
             'Content-Type': 'application/json; charset=UTF-8'
          }
      }).success(function (data) {
          console.log(data);
      });

Could someone possibly direct me to correct direction? Both WebApi and the AngularJS app are in separate domains, is this a CORS issue? How do I go around to fix when posting.

Thank you in advance.

Upvotes: 1

Views: 85

Answers (2)

Michael
Michael

Reputation: 1096

@Jordan try to disable all hanlers and then readd in web.config:

<modules>
  <remove name="FormsAuthenticationModule" />
  <remove name="WebDAVModule" />
</modules>
<handlers>
  <remove name="WebDAV" />
  <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
  <remove name="OPTIONSVerbHandler" />
  <remove name="TRACEVerbHandler" />
  <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>

Upvotes: 1

mbx-mbx
mbx-mbx

Reputation: 1775

Depending on what template you used when creating your web api project, it may or may not use OWIN. Assuming that it is (if not, the other answer by scniro will be a betting starting point):

I had a similar issue when I was posting to web api from a js app. I installed Microsoft.Owin.Cors from nuget and in my Startup.cs I added:

    public void Configuration(IAppBuilder app) {
        app.UseCors(new CorsOptions {
            PolicyProvider = new CorsPolicyProvider {
                PolicyResolver = context => {
                    CorsPolicy result = new CorsPolicy {
                        AllowAnyHeader = true,
                        AllowAnyMethod = true,
                        AllowAnyOrigin = true,
                        SupportsCredentials = true
                    };                        
                    return Task.FromResult(result);
                }
            }
        });
    }

This will allow everything. In production you can change this to allow requests only from origins that you allow like this:

    public void Configuration(IAppBuilder app) {
        app.UseCors(new CorsOptions {
            PolicyProvider = new CorsPolicyProvider {
                PolicyResolver = context => {
                    CorsPolicy result = new CorsPolicy {
                        AllowAnyHeader = true,
                        AllowAnyMethod = true,
                        AllowAnyOrigin = false,
                        SupportsCredentials = true
                    };
                    result.Origins.Add(ConfigurationManager.AppSettings.Get("YourAllowedUrl"));
                    return Task.FromResult(result);
                }
            }
        });
    }

Hope this helps.

Upvotes: 1

Related Questions