CODEWITHSUNDEEP
asp.net-web-api2angular9
user3194721
user3194721

Reputation: 815

Angular 9 GET api Http failure response 404 error

I'm calling REST API from UI, but I'm getting below error

Error Code: 404 Message: Http failure response for https://localhost:5001/api/SampleDataSource/GetDetailsById?id=101 404 OK

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# Controller

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

                    return Ok(null);
                }
    }

General:

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

Reponse Headers:

access-control-allow-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

Request Headers:

: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

Upvotes: 1

Views: 4923

Answers (2)

Palak Jadav
Palak Jadav

Reputation: 1272

You can add queryStringParameters in HttpParams like this

    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));
     }

Upvotes: 1

Sergey Shulik
Sergey Shulik

Reputation: 1010

404 - is standard error, that requested resource not found. Check your api URL, looks like you url is wrong (may be typo?). Also, to verify url check Network tab in Chrome to see real URL enter image description here

Upvotes: 2

Related Questions