CODEWITHSUNDEEP
javascriptangularamazon-web-servicesangular7
Isanka Thalagala
Isanka Thalagala

Reputation: 1731

Angular 7 : Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested

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

Upvotes: 10

Views: 52485

Answers (3)

LeonardoX
LeonardoX

Reputation: 1303

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

Upvotes: 1

ovicko
ovicko

Reputation: 2302

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

Upvotes: 9

jcuypers
jcuypers

Reputation: 1794

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.

Upvotes: 2

Related Questions