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

问题

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.

回答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);

回答2:

This is normally happens if you don't have a proxy.conf.json file in your app to allow tour traffic to the server on a different port. Angular has a feature that block traffic from going to a different port unless you force is to. If you haven't got a proxy.conf.json file that can you need to do this on your app root

proxy.conf.json

 {
    "/api": {
      "target": "http://localhost:serverPort",
      "secure": false
    }
  }

proxy.config.js

const PROXY_CONFIG = [
  {
    context: [
      "/api",
      "/auth",
      "/oauth"
    ],
    target: "http://localhost:8080",
    secure: false
  }
];

module.exports = PROXY_CONFIG;

And update the package.json

"scripts": {

    "ng": "ng",

    "start": "ng serve --proxy-config proxy.conf.json",

    "build": "ng build",

    "test": "ng test",

    "lint": "ng lint",

    "e2e": "ng e2e"

  },

That will allow the anything after /api to reach the server

回答3:

来源：https://stackoverflow.com/questions/44595500/why-is-this-http-request-failing-in-angular-4-but-goes-through-with-fiddler

标签

angular

angular-router