Ionic CORS Error, But Server Has CORS Enabled

Question

I have an Ionic 4 app that uses a lambda API hosted on AWS. CORS is enabled on the API Gateway. The following snippet is from a curl request to the API.

< content-type: application/json
< content-length: 42
< date: Sat, 16 Feb 2019 02:19:25 GMT
< x-amzn-requestid: 47a5fcac-3191-11e9-af42-d387861aa6ad
< access-control-allow-origin: *
< access-control-allow-headers: Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token
< x-amz-apigw-id: VK7vFGc4oAMFTqg=
< access-control-allow-methods: POST,OPTIONS

This post discusses a few possible workarounds (change content type, etc.), but they don't work.

Changing the Content-Type header to text/plain or removing that header altogether makes no difference.

The following error is also presented on the Ionic console

Cross-Origin Read Blocking (CORB) blocked cross-origin response
https://mycoolapi.com/GetLegal with MIME type application/json.
See https://www.chromestatus.com/feature/5629709824032768 for more details.

The following is my service code.

getLegal(data: any) {
    return new Promise((resolve, reject) => {
      let httpHeaders = new HttpHeaders().set('Content-Type', 'application/json');
      this.httpClient.post(this.apiUrl+'/GetLegal', JSON.stringify(data), {
        headers: httpHeaders,
      })
      .subscribe(res => {
        resolve(new LegalResponse(res));
      }, (err) => {
        console.log("Oops, there has been an error")
        reject(err);
      });
    });
  }

Help?

It doesn't *seem* like CORS is enabled. Sending cors headers is obviously not helpful. — Dave Newton, Feb 16 '19 at 03:44
The message cited in the question isn’t a CORS error — it’s CORB error. It indicates that the browser isn’t expecting for an application/json response to be used in the way your frontend code is trying to use it. Or maybe the response isn’t actually a JSON document, so the browser is blocking it because it’s mislabeled. Anyway, I guess that error is being triggered by whatever processing your code is doing on the response in the LegalResponse function. Consider updating the question to show what your code it trying to do with the response. — sideshowbarker, Feb 16 '19 at 05:35

score 0 · Answer 1 · answered Feb 16 '19 at 11:59

This ended up being a bug on the Amazon side. The curl snippet was from a GET method, which was sending the CORS headers. The POST method was not. After redeploying the API without changing anything, the GET method was no longer sending the CORS headers and the POST method was. The application is working, for now.

Ionic CORS Error, But Server Has CORS Enabled

1 Answers1