9

I have to implement an angular application with CURD operations. API is already hosted IN AWS, Which is working fine with Postman.

But my angular application getting

Access to XMLHttpRequest at 'https://acp56df5alc.execute-api.us-east-1.amazonaws.com/ams/getmember' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

My code is like below,

http_GET(actionUrl: string): Observable<any> {
        const httpOptions = {
            headers: new HttpHeaders({
                'Content-Type': 'application/json',
                'Access-Control-Allow-Origin': '*',
                'Access-Control-Allow-Credentials': 'true',
                'Access-Control-Allow-Headers': 'Content-Type',
                'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE',
                'key': 'x-api-key',
                'value': 'NNctr6Tjrw9794gFXf3fi6zWBZ78j6Gv3UCb3y0x',

            })
        };
        return this.http.get<any>(this.baseUrl + actionUrl, httpOptions).pipe(
            (response => {
                return response;
            }));
    }

I have tried hard to solve this.But need some help

Isanka Thalagala
  • 1,625
  • 3
  • 16
  • 32
  • I actually just had this exact error message (other than the domains of coarse), and had the app working before, so knew that it shouldn't be a true CORS issue, turned out that I had renamed a directory on the server, but had not renamed the directory in the web.config file. May be worth taking a look to see if you have anything else that is failing that may be then leading to this false positive error message. – dmoore1181 Apr 17 '19 at 17:24

3 Answers3

9

I had the same cors issue and tried all the suggested ways of setting Access-Control-Allow-Origin * without success.
Later I found two issues:

  1. The data format I sent via POST request was not properly formatted.
  2. The server could not handle empty parameters received from the post request.

Original request:

return this.http.post(API_URL + 'customer/login',
  {email: email, password: password},{ headers: headers}
)

Worked after i wrapped the post data using JSON.stringify()

return this.http.post(API_URL + 'customer/login',
      JSON.stringify({email: email, password: password}),{ headers: headers}
    )
ovicko
  • 2,242
  • 3
  • 21
  • 37
2

All/Most of these headers need to be defined on the server-side (whatever hosts the API on AWS)... not client side.

 headers: new HttpHeaders({
                'Content-Type': 'application/json',
                'Access-Control-Allow-Origin': '*',
                'Access-Control-Allow-Credentials': 'true',
                'Access-Control-Allow-Headers': 'Content-Type',
                'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE',
                'key': 'x-api-key',
                'value': 'NNctr6Tjrw9794gFXf3fi6zWBZ78j6Gv3UCb3y0x',
  ...

The most likely reason that postman works is that it directly sends a GET request. what you are sending is a complex request which is called 'pre-flight' and which causes an 'OPTIONS' request to be sent before the actual GET. this is not allowed by the remote side.

jcuypers
  • 1,774
  • 2
  • 14
  • 23
1

That's a common CORS problem that (if you're using asp .net core on backend) can be solved enabling CORS following this thread

LeonardoX
  • 1,113
  • 14
  • 31