CODEWITHSUNDEEP
angularaws-api-gateway
EHorodyski
EHorodyski

Reputation: 794

Angular HTTP Request Works, but HttpClient Fails

I've built an API that is CORS enabled, but HttpClient is throwing me some weird stuff on the client-side. When I look at the Network tab in Chrome, I see the correct response to my request, but since I'm running locally, Angular is throwing a CORS error.

Here's my code:

public search(data: string): Promise<any> {
        const url = `${Configuration.ENDPOINTS.APP}`, headers = new HttpHeaders({ 'x-api-key': 'abcd...' });
        const body = { data: data };
        return this._http.post<any>(url, body, { headers: headers }).toPromise();
}

/// View Logic
search("test").then(console.log).catch(console.error)

Running this code, I get the following error on the Console tab of Chrome:

Failed to load https://abcd.execute-api.us-east-1.amazonaws.com/v1/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

HttpErrorResponse
{
  "headers": {
  "normalizedNames": {},
  "lazyUpdate": null,
  "headers": {}
  },
  "status": 0,
  "statusText": "Unknown Error",
  "url": null,
  "ok": false,
  "name": "HttpErrorResponse",
  "message": "Http failure response for (unknown url): 0 Unknown Error",
  "error": {
    "isTrusted": true
  }
}

However, if I look into the Network tab, this is the response:

Headers
    content-length: 16865
    content-type: application/json
    date: Wed, 04 Apr 2018 17:34:28 GMT
    status: 200
    via: 1.1 cae81d5ff1d682b28f2deabdd94777d4.cloudfront.net (CloudFront)
    x-amz-apigw-id: E07puFICPHcFYCA=
    x-amz-cf-id: -UYlYK_yC8cUVZF2OnRFcUb_fIjcRrgMuvpU3ADdbpyEvPZ-nUJXNA==
    x-amzn-requestid: 6d3a0533-382e-11e8-ad31-b124cb8b7a9a
    x-amzn-trace-id: sampled=0;root=1-5ac50ca4-2411d1b5cb7d1af6232883a6
    x-cache: Miss from cloudfront

Response
    {
        meta: { ... }
        data: [ ... ]
    }

I've omitted some things for security reasons from the response.

Does anyone know what is going on? Why does the network tab work but Angular doesn't?

Edit: This is part of an AWS API Gateway. All resources are CORS enabled, but for some reason the endpoints integrated with Lambda are throwing this at me. The other endpoints go straight to DynamoDB and work flawlessly...

Upvotes: 4

Views: 2864

Answers (2)

Michał Z.
Michał Z.

Reputation: 1392

Under the hood - browser made successfully request to your API, but since request have different origin and Access-Control-Allow-Origin header is missing - it's blocked due to security reason, which is standard behaviour of modern web browsers.

You can read more about CORS here.

As I see, you're using AWS API Gateway - here is guide how to enable CORS at API Gateway

Edit

If you enabled CORS, status code is 200 and still missing Access-Control-Allow-Origin you possibly using Lambda proxy integration at API Gateway. In that case - your Lambda is responsible for returning headers etc.

So response object should look like this:

{
    ...
    "headers": {
        "Access-Control-Allow-Origin": "*",
        ...
    },
    ...
}

more info here

Upvotes: 2

Anna
Anna

Reputation: 186

As I know, there are two options. The first is to modify your backend, so that it would send localhost in the Access-Control-Allow-Origin header, and the second (a simpler one, as for me) is to proxy your api calls. If you use angular-cli, you can configure it to proxy your requests, if not - you can use nginx - just download it, even no need to install something, and then modify the conf file (fiy)

Upvotes: 0

Related Questions