为什么这个 http 请求在 angular 4 中失败，但通过 fiddler? [英] Why is this http request failing in angular 4, but goes through with fiddler?

问题描述

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

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

带有

的主体

{"email":"[e-mail]","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(this.constants.accountUrl + "Register");return this.http.post(this.constants.accountUrl + "Register", creds, { headers: headers }).map(res => res.json());}信用={"email":"[e-mail]","password":"Abc1231*","confirmPassword":"Abc1231*"}url = http://localhost:58183/api/Account/Registerjson-contentType = "application/json;charset=UTF-8";

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

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

家错误语法错误:无效字符core.es5.js (1020,1)错误"{[职能]: ，原型:{}，描述:无效字符"，消息:无效字符"，名称:语法错误"，号码:-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)OPTIONS - http://localhost:58183/api/Account/Register>

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

解决方案

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

I have an http post request through fiddler: using

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

with a body of

{"email":"[e-mail]","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":"[e-mail]","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.

解决方案

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

这篇关于为什么这个 http 请求在 angular 4 中失败，但通过 fiddler?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！