Question

我使用angular 4 http post方法调用带有Authorization标头的ASP.NET Web API。使用邮递员调用web api时工作正常，但使用角4它不起作用我尝试了以下方法，但没有人工作。

import { URLSearchParams, Http, Headers, Response, RequestOptions, RequestOptionsArgs, RequestMethod} from "@angular/http"

＆GT;

1-            
            let headers = new Headers();
            let authToken = accessToken;
            headers.append('Authorization', `Bearer ${authToken}`);
            let options = new RequestOptions();
            options.headers = headers;

            this.http
                .post(url, "", options)
                .subscribe(data => {
                    console.log(data);

                }, error => {
                    alert("error");
                });

或使用此

2-            
            let authToken = accessToken;
            let headers = new Headers({ 'Authorization': `Bearer ${authToken}` });
            let options = new RequestOptions({ headers: headers });

            this.http
                .post(url, "", options)
                .subscribe(data => {
                    console.log(data);

                }, error => {
                    alert("error");
                });

这样

3-
        let authToken = accessToken;
        let headers = new Headers({ 'Authorization': `Bearer ${authToken}` });
        this.http
            .post(url, "", { headers: headers})
            .subscribe(data => {
                console.log(data);

            }, error => {
                alert("error");
            });

405（方法不允许） XMLHttpRequest无法加载http://localhost/domain/api/Account/check。预检的响应具有无效的HTTP状态代码405

类型的参数＆＃39; {headers：Headers; }＆＃39;不能分配给＆＃39; RequestOptionsArgs＆＃39;类型的参数。财产类型＆＃39;标题＆＃39;是不相容的。输入＆＃39;标题＆＃39;不可分配

Answer 1

您正在使用.Net作为应支持CORS的服务器。如果您使用的是chrome，则必须安装chrome插件“Allow-Control-Allow-Origin”。然后刷新浏览器并重试。在我的案例中，我认为这适用于你。

Answer 2

johnd

请使用此3- let authToken = accessToken; let headers = new Headers({ 'Authorization': `Bearer ${authToken}` }); this.http .post(url, "", { headers: headers} as RequestOptionsArgs) //please look at this. here we cast it .subscribe(data => { console.log(data); }, error => { alert("error"); });。我们需要将它强制转换为RequestOptionsArgs。

Answer 3

基于此Answer

我从web.cong中删除customHeaders

 <httpProtocol>
      <customHeaders>
        <clear />
        <add name="Access-Control-Expose-Headers " value="WWW-Authenticate"/>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS, PUT, PATCH, DELETE" />
        <add name="Access-Control-Allow-Headers" value="accept, authorization, Content-Type" />
        <remove name="X-Powered-By" />
      </customHeaders>
    </httpProtocol>

并安装此软件包nuget

Install-Package Microsoft.AspNet.WebApi.Cors

内部开始使用

             public void Configuration(IAppBuilder app)
        {
               //..
                app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
               //..
        }

Angular 4代码

import {  Http, Headers, Response, RequestOptions} from "@angular/http"

let authToken = accessToken;
        let headers = new Headers({ 'Authorization': `Bearer ${authToken}` });
        let options = new RequestOptions({ headers: headers });

        this.http
            .post(url, "", options)
            .subscribe(data => {
                console.log(data);

            }, error => {
                alert("error");
            });

它的作品！。

Angular 4 HTTP帖子（授权标头）无效

3 个答案: