When did I encounter this issue?

• I implemented a sample API in the project.
• I couldn't figure out what is going wrong when I encountered the CORS issues.
• In the App, with swift & kotlin code, API seems to be working fine.
• I tried with Postman, It worked just fine.
• I was baffled - What am I doing wrong?
• I went through the code of Axios.
• I re-read the documentation of Axios.
• I kept scrolling Quasar + Axios documentation.
• Believe me, at one point, I gave up.

source

What went wrong?

source

• Actually, nothing went wrong.
• It's a common issue when server tightens the security.
• Security Settings - Other servers should not access the APIs.
• If I run the app with Quasar + Axios, it runs on a localhost.
• Due to this local-server nature of Quasar App, App wouldn't get any response.

What is CORS?

• Cross-Origin Resource Sharing (CORS)
• CORS is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.
• Find more details here - https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

What to do now?

source

• I can not change the way Quasar works.
• Axios is the best way to execute APIs
• I even tried plain HTTP requests (without third party libraries)
• It did NOT help.

Capacitor comes to rescue

• I know when you hear word Capacitor following comes to your mind.

source

• But that's not what I am talking about.
• I am talking about The CapacitorJS

source

How did I manage to fix it?

CapacitorJS with HTTP Plugin

• If I execute APIs / communicate with server with Axios, it goes via localhost & failes.
• But if I use CapacitorJS's HTTP plugin, it goes via mobile app & it gets a valid response from server.
• The Capacitor Http API provides native http support via patching fetch and XMLHttpRequest to use native libraries.
• It also provides helper methods for native http requests without the use of fetch and XMLHttpRequest.

How to enable it?

• Go to your project direcotry.

npm install @capacitor/core

• You would also need to install inside src/src-capacitor. Navigate to that directory & run following command again.

~/Projects/quasar-learnings/axioshttp/src/src-capacitor > npm install @capacitor/core

• Note that here ~/Projects/quasar-learnings/axioshttp/src/src-capacitor is my project's working directory for example. You'll have to change it to / navigate to that directory.

Show me the Code

source

• Enough talk. Here is the code snippet.

import { CapacitorHttp } from '@capacitor/core';

async function sendVerificationEmailRequest(
    baseUrl: string,
    email: string
): Promise<HTTPResponse> {
  const config = {
    method: 'GET',
    url: `${baseUrl}v1/user/verifyEmail/${email}`,
    headers: {
      'Content-Type': 'application/json',
      Accept: 'application/json, text/plain, */*',
    },
  };
  try {
    const response = await CapacitorHttp.request(config);
    return response;
  } catch (e) {
    throw e;
  }
}

• Easy Peasy, isn't it.
• I wish I could have figured out this earlier.
• I could have saved a lot of time.
• I spent time finding fix for it.
• But hey, you don't have to waste your time.
• Use this trick, save your time & energy.
• Use above code snippet, modify request & enjoy a cup of coffee.

My Previous posts about Development using Quasar

• Hide bottom toolbar when keyboard is shown
• Create a project with Quasar Framework
• Add VS Plugins, Create a Component
• Using Quasar Framework instead of Flutter

---

Support me

Please 🙏	Support Me
Vote me as Hive Witness	Donate Hive Or HBD