Error when using POST in AgularJS to .net WebAPI

Question

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.

Answer 1

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.

Answer 2

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