Angular7 http.get请求不到后台服务

Question

ngOnInit(): void {
alert(1);
this.todos$ = this.http
.get(
"http://localhost:1202/auth/api/findAll?pageNum=1&pageSize=2&appId=yq_rong360&secret=$2a$10$DKTXFeM8l/i3BtPdcuwCUeb1W/PV98qfJ7HFF.4SbJmC0nbpW5AwO"
)
.pipe(tap(console.log));
alert( JSON.stringify(this.todos$));
}

get方法请求不到后台这个是什么情况？network中也没看到有请求url

Answer 1

在Angular 7 中使用 HttpClient 发送 http.get 请求到后台服务，如果遇到请求不到的情况，可能存在以下几个原因：

服务端API地址不正确： 确保前端代码中指定的API URL是正确的，包括协议（http/https）、主机名、端口和路由。例如：

this.http.get('http://localhost:3000/api/data');

跨域问题： 如果前端应用与后台服务不在同一源下，可能需要处理跨域问题。服务端需要开启跨域支持，通常通过设置响应头（如Access-Control-Allow-Origin）来实现。

代理配置： 如果你在开发环境中使用诸如Angular CLI的proxy配置代理转发API请求，确认proxy.conf.json文件配置正确。

认证和授权： 如果后台服务需要认证或授权，确保前端请求附带了必要的认证令牌（如Bearer Token）。

防火墙或网络问题： 检查防火墙设置，确保允许前端应用访问后台服务的端口。

请求格式不正确： 确保发送的请求格式符合服务端的预期，包括查询参数、请求体格式等。

服务端API问题： 后台服务端可能存在问题，如服务未启动、路由错误或服务端代码逻辑错误等，可以通过查看服务端日志来排查。

Angular HttpClient使用错误： 确保正确导入了 HttpClientModule 并注入了 HttpClient 服务。示例代码如下：

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

@NgModule({
  imports: [
    // ...
    HttpClientModule
  ],
})
export class AppModule { }

// 在服务或组件中注入HttpClient
constructor(private httpClient: HttpClient) {}

getData() {
  this.httpClient.get<any>('your-api-url')
    .subscribe(
      data => console.log(data),
      error => console.error(error)
    );
}

如果以上各项都检查无误，但仍无法成功连接，尝试使用浏览器的开发者工具（如Chrome DevTools）检查网络请求，查看请求是否发出、请求详情、响应情况以及可能存在的错误信息。