Why is this http request failing in angular 4, but goes through with fiddler?

Question

I have an http post request through fiddler: using

http://localhost:58183/api/Account/Register

with a body of

{"email":"jbjunk4@outlook.com","password":"Abc1231*","confirmPassword":"Abc1231*"}

This executes just fine and the email is registered in the identity database on webapi 2.

However, I have the following code in my authorize.service.ts:

 registerUser(localUser: LocalUser) {
        var headers = new Headers();
        headers.append('Content-Type', this.constants.jsonContentType);
        var creds = JSON.stringify(localUser);
        console.log(creds);
        console.log(this.constants.accountUrl + "Register");

        return this.http.post(this.constants.accountUrl + "Register", creds, { headers: headers })
            .map(res => res.json());
    }

creds = 
{"email":"jbaird9@arsbirder.com","password":"Abc1231*","confirmPassword":"Abc1231*"}

url = http://localhost:58183/api/Account/Register
json-contentType = "application/json;charset=UTF-8";

The console shows: SCRIPT7002: XMLHttpRequest: Network Error 0x80070005, Access is denied.

home HTML1300: Navigation occurred. home Template parse warnings: The element is deprecated. Use instead ("-child ui-shadow':!root}" class="ui-menu-list" (click)="listClick($event)"> [WARNING ->] http://localhost:58183/api/Account/Register authorization.service.ts (47,9) SCRIPT7002: XMLHttpRequest: Network Error 0x80070005, Access is denied.

home ERROR SyntaxError: Invalid character core.es5.js (1020,1) "ERROR" { [functions]: , proto: { }, description: "Invalid character", message: "Invalid character", name: "SyntaxError", number: -2146827274, stack: "SyntaxError: Invalid character at Anonymous function (http://localhost:4200/main.bundle.js:788:13) at SafeSubscriber.prototype.__tryOrUnsub (http://localhost:4200/vendor.bundle.js:37370:13) at SafeSubscriber.prototype.error (http://localhost:4200/vendor.bundle.js:37329:21) at Subscriber.prototype._error (http://localhost:4200/vendor.bundle.js:37260:9) at Subscriber.prototype.error (http://localhost:4200/vendor.bundle.js:37234:13) at Subscriber.prototype._error (http://localhost:4200/vendor.bundle.js:37260:9) at Subscriber.prototype.error (http://localhost:4200/vendor.bundle.js:37234:13) at onError (http://localhost:4200/vendor.bundle.js:108672:17) at ZoneDelegate.prototype.invokeTask (http://localhost:4200/polyfills.bundle.js:2836:13) at onInvokeTask (http://localhost:4200/vendor.bundle.js:90272:21)" }

HTTP405: BAD METHOD - The HTTP verb used is not supported. (XHR)OPTIONS - http://localhost:58183/api/Account/Register

I can't figure this out. Thanks in advance for any help.

Answer 1

I added the cors attributes to webapi config... and it all started working... var cors = new EnableCorsAttribute("", "", "GET,PUT,POST,PATCH,DELETE,OPTIONS"); config.EnableCors(cors);