angular get请求报错401，From Auth Intercept

原文链接：angular get请求报错401，From Auth Intercept – 每天进步一点点 (longkui.site)

 

0.背景

在ng Alain中开发出现如下报错：

error: null
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}
message: "Http failure response for /xxxx/energySavingReview/getRegion?orgType=region: 401 From Auth Intercept --> https://ng-alain.com/docs/auth"
name: "HttpErrorResponse"
ok: false
status: 401
statusText: "From Auth Intercept --> https://ng-alain.com/docs/auth"
url: "/xxxx/energySavingReview/getRegion?orgType=region"
[[Prototype]]: HttpResponseBase

出现报错401。一开始以为是这个接口加了后台权限，但是在浏览器里直接请求，发现是正常的，那么问题就出在angular本身上。

1.问题原因及解决办法

网上找了很多方法，都没有完全解决这个问题，最后发现是http模块的事。

网上有的答案说需要四步

1.在app.module.ts中加入

import {
  HttpClientModule,
} from '@angular/common/http';

2.然后在下方ngModule模块加入HttpClientModule

@NgModule({
  declarations: [AppComponent],
  imports: [

    HttpClientModule,
  ],
  providers: [
],
  bootstrap: [AppComponent]
})

3.再然后，在组件中加入

import { HttpClient } from '@angular/common/http';




 constructor(
    private http: HttpClient,
  ) { }

4.使用http模块

this.http.get('url').subscribe((res: any) => {
      console.log("GET 请求", res)
    })

我照着上面这样操作，发现还是跟原来一样报错，一开始没想明白，后来终于找到问题所在了。

原来，我的代码结构是存在二级的module.ts文件，也就是我再创建组件的时候，先创建了一个带routing的module。那么我刚才在app.module.ts中所作的第一步和第二步，也需要在我刚才自己创建的xxxx.module.ts中做同样的操作。

把上方第一步和第二步的操作在xxx.module.ts中做完后，继续get请求，发现数据正常返回了。