为什么此 http 请求在 angular 4 中失败，但通过 fiddler 完成？

Question

我有一个通过 fiddler 的 http post 请求：使用

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

身材

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

这执行得很好，电子邮件已在 webapi 2 的身份数据库中注册。

但是，我的 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";

控制台显示： SCRIPT7002：XMLHttpRequest：网络错误 0x80070005，访问被拒绝。

家 HTML1300: 导航发生。家模板解析警告：该元素已弃用。请改用 ("-child ui-shadow':!root}" class="ui-menu-list" （点击）="listClick($event)"> [警告 ->] http://localhost:58183/api/Account/Register authorization.service.ts (47,9) SCRIPT7002：XMLHttpRequest：网络错误 0x80070005，访问被拒绝。

家错误语法错误：无效字符核心.es5.js (1020,1) "ERROR" { [职能]：，原型：{}，描述："Invalid character"，消息："Invalid character"，姓名："SyntaxError", 号码：-2146827274，堆栈：“语法错误：无效字符在匿名函数 (http://localhost:4200/main.bundle.js:788:13) 在 SafeSubscriber.prototype.__tryOrUnsub (http://localhost:4200/vendor.bundle.js:37370:13) 在 SafeSubscriber.prototype.error (http://localhost:4200/vendor.bundle.js:37329:21) 在 Subscriber.prototype._error (http://localhost:4200/vendor.bundle.js:37260:9) 在 Subscriber.prototype.error (http://localhost:4200/vendor.bundle.js:37234:13) 在 Subscriber.prototype._error (http://localhost:4200/vendor.bundle.js:37260:9) 在 Subscriber.prototype.error (http://localhost:4200/vendor.bundle.js:37234:13) 在 onError (http://localhost:4200/vendor.bundle.js:108672:17) 在 ZoneDelegate.prototype.invokeTask (http://localhost:4200/polyfills.bundle.js:2836:13) 在 onInvokeTask (http://localhost:4200/vendor.bundle.js:90272:21)” }

HTTP405：错误方法 - 不支持使用的 HTTP 动词。 (XHR) 选项 - http://localhost:58183/api/Account/Register

我想不通。在此先感谢您的帮助。

Answer 1

如果您的应用程序中没有 proxy.conf.json 文件以允许游览流量到不同端口上的服务器，则通常会发生这种情况。 Angular 具有阻止流量流向其他端口的功能，除非您强制这样做。如果您没有 proxy.conf.json 文件，您需要在 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;

并更新 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"

  },

这将允许 /api 之后的任何内容到达服务器

Answer 2

我将 cors 属性添加到 webapi 配置中……一切都开始工作了……var cors = new EnableCorsAttribute("", "", "GET,PUT,POST,PATCH,DELETE,OPTIONS"); config.EnableCors(cors);

Answer 3

如果您的应用程序中没有 proxy.conf.json 文件以允许游览流量到不同端口上的服务器，则通常会发生这种情况。 Angular 具有阻止流量流向其他端口的功能，除非您强制这样做。如果您没有 proxy.conf.json 文件，您需要在 app root

上执行此操作

为什么此 http 请求在 angular 4 中失败，但通过 fiddler 完成？

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

angular

angular-router