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请求,发现数据正常返回了。