CORS issue in ionic4

Question

I am using Angularfire 2 and calling cloud function from my ionic 4 app.How to solve the following CORS issue in ionic 4 ??

Access to fetch at 'https://null-myionicshop-693bc.cloudfunctions.net/subscribeToTopic' from origin 'http://localhost:8100' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Answer 1

Dear I had the same error When I try to POST by Httpclient Angular 7 in ionic 4, After I add below link before api url it worked for me. https://cors-anywhere.herokuapp.com/

Ex: https://cors-anywhere.herokuapp.com/http://something.com/api/details.php

And when run api on localhost. Follow below,

1-Run "Cmd" as Administrator

2-"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp

run this on cmd. New chrome session will automaticly start. Run ionic project here.

Answer 2

CORS is only an issue when we are running or testing our app when running ionic serve or ionic run -l.

There are two ways to solve the issue: The first, and easier, solution is to just allow all origins from your API endpoint.

Second, you can do this by using a proxy server. Let’s say we want to access https://null-myionicshop-693bc.cloudfunctions.net/subscribeToTopic, which is not allowing our origin from localhost.

The proxies settings contain two things: the path you use to access them on your local Ionic server, and the proxyUrl you’d ultimately like to reach from the API call.

Set up your ionic.project file to be something like:

{
  "name": "proxy-example",
  "app_id": "",
  "proxies": [
    {
      "path": "/subscribeToTopic",
      "proxyUrl": "https://null-myionicshop-693bc.cloudfunctions.net/subscribeToTopic"
    }
  ]
}

As we specified above, when you access the ionic server at the path http://localhost:8100/api, it will proxy requests out to https://null-myionicshop-693bc.cloudfunctions.net/subscribeToTopic on your behalf.

Thus, no CORS is required.

I hope this helps! Thank You

Answer 3

I think you have to check your ionic logs wich is in ~/.ionic/helper.log , in my case my error was:

[ERROR] Error loading @ionic/angular-toolkit package.json: Error: Cannot find module '@ionic/angular-toolkit/package'

So I was installed the package "@ionic/angular-toolkit/package", and then I was configured my angular.json:

"serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "app:build",
        "proxyConfig": "proxy.conf.json"
      },

And then worked perfectly So my recommendation is... check your ionic logs

Answer 4

I reached out such as errors today and I solved. My project was ionic 4 and backend express with typescript.

The error was the No 'Access-Control-Allow-Origin' header is present on the requested resource.

I solved in Express. I attached the following rows in Request's "header" of backend code.

this.app.use((req, res, next) => {
      res.header('Access-Control-Allow-Origin', '*');
      res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
      next();
    });

As well as these lines.

const whitelist = [
      'http://localhost:8000',
      'capacitor://localhost',
      'ionic://localhost',
      'http://localhost',
      'http://localhost:8080',
      'http://localhost:8100',
    ];
    const corsOptions = {
      origin: (origin: any, callback: any) => {
        console.log(origin);
        if (whitelist.indexOf(origin) !== -1) {
          callback(null, true);
        } else {
          callback(new Error('Not allowed by CORS'));
        }
      },
      preflightContinue: true,
      credentials: true,
    };
    // Enable preflight requests for all routes
    this.app.options('*', cors(corsOptions));

I think your trouble was similar to these. Thanks for reading my suggestion.