Manage CORS issue with fetch and domain change

Hello,

I use an API to get the data and to log the user.

To get data, I use the fetch method but now, I want to change the domain name of the API.
(For example: currently myapi.org and I want to use myapi.com).

I have prepared a few month ago a way to detect the moment to switch to the new domain name.

Problem: When I target the new domain, I have an error with the fetch with the CORS:

Access to fetch at 'https://myapi.com/checkdomain' from origin 'https://localhost' has been blocked by CORS policy: 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.

I know I can fix by adding cache: 'no-cache' in the params of the fetch method but is there a way to accept the new domain without changing anything in the app code (only in the server side)?

Thanks for your help,
Loïc

All CORS settings are backend. It sounds like the server at myapi.com isn’t configured correctly for CORS.

The following domains need to be configured in your CORS settings in the backend to be allowed (assuming you didn’t change Capacitor’s defaults):

  • iOS: capacitor://localhost
  • Android: http://localhost
1 Like

Hello @twestrick,

Thanks for your reply :slight_smile:

Ok I have defined temporarily this rule in the .htaccess file to fix it:

Header set Access-Control-Allow-Origin "*"

Now, I don’t have anymore the error of CORS but, I have an infinite loop with the previous redirect because of the cache system.

So before I was redirecting the user from myapi.com to myapi.org but now, I want to do the opposite. However, the application browser seems to keep in cache the previous redirect and don’t stay on myapi.com even if there is no redirect on this domain now.

Is there a way (server side) to “clear” the previous redirect?

Best regards,
Loïc

Hmmm, that sounds odd. I’ve never heard of a browser caching a redirect. Are you sure it’s not a misconfiguration on the server side?

Not sure but when I look through the network panel, I can see this:

fetch 301 Moved Permanently (from disk cache)

Also, I can see a loop of redirect like this:

  1. myapi.com > 301 redirect to myapi.org (cache redirect because not define anymore)
  2. myapi.org > 301 redirect to myapi.com (normal because of the new redirect)
  3. myapi.com > 301 redirect to myapi.org (cache redirect because not define anymore)
  4. myapi.org > 301 redirect to myapi.com (normal because of the new redirect)
  5. And so on till the server return an error of Too many redirects

Also, when I add the parameter cache: 'no-cache' in the fetch method in the app, I don’t have the issue anymore but in my case I prefer (if possible) fixing it from the server to avoid sending a new version of the app wait the validation etc.

So, I suppose this is about the browser cache but yes, I never encounter a similar issue previously :confused:

Kind regards,
Loïc

What happens if you open up DevTools and “Disable cache” under the network tab (at least in Chrome)?

Hi again,

Sorry for my delayed reply.

When I check the box “Disable cache”, it works fine.

Do you think there is a way to fix it server side?

Kind regards,
Loïc

From my limited knowledge with caching and some Googling, I don’t think so since the browser is caching the redirect. The browser isn’t going to contact your server to get updated info until the cache expires.

Ok no problem. I tried several options but without any solution :confused:
I will probably send a new version of the app and wait till the changes are applied for a majority of devices.

Thanks anyway for your help and happy holidays :christmas_tree:

Loïc