How to solve CROSS Origin issue in ionic-vue?

Question

I am new to Ionic framework (with Vuejs) and trying to make simple Crud app. But due to CORS issues, i can't able to login.

Browser console show XMLHttpRequest at 'http://localproject.test/api/login' from origin 'http://localhost:8100' has been blocked by CORS policy

I tried a lot of different solutions, without success Please help.

Thanks in advance.

Answer 1

If your app will be running on browser, use Proxy server.

Example: I want to post to http://localproject.test/api/login.

In package.json, I will add this line:

"proxy": "http://localproject.test/api"

My POST request in Login component:

     axios
          .post("/login", loginData)
          .then((response) => {
           ...
            }
            return response.data;
          })
          .catch((error) => {
            ...
          });

Answer 2

You will allow CORS from your backend. If you want to resolve CORS issue from your end you will use ionic HTTP native plugin link. This is not recommended because you can't track requests from your network tab.

my suggestion you need to resolve your CORS issue from your backend.