V6 localhost API error - Could not connect to the server/access control checks?

[lelandB]

Hello all,

This is my first ionic app and things have been going quite well - I’ve been developing an app to allows users to track their geolocation so they can be guided to locations on a map to take a photo. Local development on my browsers has been fine but I’m running into an issue when I try to reach my local Django server at http://localhost:8000/api/v1/signin/ from my iPhone while connected to my laptop. I use axios to make this request.

Initially I believed this was a CORS issue, but my local server is configured to allow all access - here is the same request from the browser:

I have been following the instructions here: https://eliteionic.com/tutorials/accessing-localhost-from-mobile-device-ios-android/

And I have also set various settings in my Info.plist to YES:
NSAllowsLocalNetworking - YES
NSAllowsArbitraryLoads - YES
NSAllowsArbitraryLoadsInWebContent - YES

Sadly, none of these have helped and I still see that error “could not connect to server” and “XMLHttpRequest cannot load … due to access control checks”. What am I missing?

[lelandB]

Solved! Not a CORS issue or ioS specific issue.

In my router/index.js file, for Vue.js I was incorrectly creating the router like this:

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

That process.env.BASE_URL was set to localhost:8000. Changing the router like this did the trick:

const router = createRouter({
  history: createWebHistory(),
  routes,
});