Question

我想在Angular 5网络应用中添加标题以发布请求。我创建了以下Injectable类，在我的app模块中注册：

@Injectable()
    export class headerInterceptor implements HttpInterceptor {
      intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {    
        // Clone the request to add the new header         
        const authReq = req.clone({
          headers: new HttpHeaders({
            'Content-Type':  'application/json; charset=utf-8',        
          })
        });        
        return next.handle(authReq);


      }
    }

我有网络通讯服务和Im添加身体参数如下。

@Injectable()
export class NetworkService {

  Root:string = 'some valid url';
  results:Object[];
  loading:boolean;

  // inject Http client to our client service.
  constructor(private httpClient: HttpClient ) {

  }



  login(loginParams : URLSearchParams){    
    let baseURL = `${this.Root}/login`;                    
    this.httpClient.post(baseURL, JSON.stringify({'UserName':'123','Password':'123'} ))
    .subscribe(data => {
        console.log();
    },
    err => {
          console.log('Error: ' + err.error);
      });

当我在headerInterceptor类中的clone方法之后放置断点时，我可以看到请求体。问题是当我切换到chrome中的网络选项卡时，我得到405错误，我看不到正文和新标题。当我返回原始请求'req'时身体发送正常，但当然没有新的标题。

Answer 1

App Module，

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { headerInterceptor } from './httpinterceptor'

将其添加到提供商，

providers: [
{
    provide: HTTP_INTERCEPTORS,
    useClass: headerInterceptor,
    multi: true
}
],

现在将受影响者更改为，我已经改变了添加headers的方式

@Injectable()
    export class headerInterceptor implements HttpInterceptor {
      intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const authReq = req.clone({
              headers:req.headers.set("Content-Type", "application/json; charset=utf-8")
        });
        return next.handle(authReq);
      }
    }
}

您还可以使用setHeaders：

@Injectable()
export class headerInterceptor implements HttpInterceptor {
  constructor() {}
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {y
    req = req.clone({
      setHeaders: {
        "Content-Type": "application/json; charset=utf-8"
      }
    });
    return next.handle(req);
  }
}

Answer 2

我的问题出在服务器端，我正在使用ASP.net和wcf。在使用Angular 5项目时，服务器似乎必须实现CORS支持（可以使用jQuery和跨域标记）。

这篇文章帮助我在CORS中添加了支持：

http://blogs.microsoft.co.il/idof/2011/07/02/cross-origin-resource-sharing-cors-and-wcf/

通过HttpInterceptor Angular 5添加标头

2 个答案: