Angular 9 GET api Http失败响应404错误

Question

我正在从 UI 调用 REST API，但出现以下错误

错误代码：404 消息：https://localhost:5001/api/SampleDataSource/GetDetailsById?id=101 404 OK 的 Http 失败响应

query(queryStringParameters?: any): Observable < object > {
      private headers = new HttpHeaders(); 

     this.headers = this.headers.append('X-Requested-With', 'XMLHttpRequest');
      this.headers = this.headers.append('Content-Type', 'application/json');
      this.headers = this.headers.append('Accept', 'application/json');
      this.headers = this.headers.append('Access-Control-Allow-Headers', 'Content-Type');

     return this.http.get(this.BASE_URL + '?' + queryStringParameters, { headers: this.headers }).pipe(catchError(this.handleError));
}

c#控制器

[Route("api/[controller]")]
        public class SampleDataSourceController : Controller
        {
         [HttpGet("GetDetailsById")]
                public IActionResult GetDetailsById([FromQuery] string id)
                {

                    return Ok(null);
                }
    }

一般：

Request URL: https://localhost:5001/api/SampleDataSource/GetDetails?id=101
Request Method: GET
Status Code: 404 
Remote Address: [::1]:5001
Referrer Policy: strict-origin-when-cross-origin

响应标题：

访问控制允许来源：*

connection: keep-alive
content-length: 174
content-security-policy: default-src 'none'
content-type: text/html; charset=utf-8
date: Fri, 05 Jun 2020 15:02:42 GMT
server: Kestrel
status: 404
x-content-type-options: nosniff
x-powered-by: Express

请求标头：

:authority: localhost:5001
:method: GET
:path: /api/SampleDataSource/GetDetails?id=101
:scheme: https
accept: application/json
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9,fr;q=0.8,te;q=0.7
access-control-allow-headers: Content-Type
cache-control: no-cache
content-type: application/json
cookie: ai_user=d3TQ|2020-06-04T15:35:45.072Z; ai_session=gU3qi|1591367714431|1591367843063.445
pragma: no-cache
referer: https://localhost:5001/
request-id: |ed257af3e5b34db4be330d4be3b41449.ac4bec56ee484ece
sec-ch-ua: "\\Not;A\"Brand";v="99", "Google Chrome";v="85", "Chromium";v="85"
sec-ch-ua-mobile: ?0
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: same-origin
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4158.4 Safari/537.36
x-requested-with: XMLHttpRequest

Answer 1

404 - 标准错误，即未找到请求的资源。检查您的 api URL，看起来您的 url 是错误的（可能是拼写错误？）。此外，要验证 URL，请检查 Chrome 中的网络选项卡以查看真实 URL

Answer 2

你可以像这样在 HttpParams 中添加 queryStringParameters

    query(queryStringParameters?: any): Observable < object > {
        private headers = new HttpHeaders(); 

        this.headers = this.headers.append('X-Requested-With', 'XMLHttpRequest');
        this.headers = this.headers.append('Content-Type', 'application/json');
        this.headers = this.headers.append('Accept', 'application/json');
        this.headers = this.headers.append('Access-Control-Allow-Headers', 'Content-Type');
        const httpParams = new HttpParams().set('page', queryStringParameters.page).set('sort', queryStringParameters.sort);

         return this.http.get(this.BASE_URL{ headers: this.headers, params: httpParams }).pipe(catchError(this.handleError));
     }