[Bug]: 3xx status code response through error when using it with fetch API

[Ammar1999y]

Capacitor Version

Latest Dependencies:

@capacitor/cli: 6.1.2
@capacitor/core: 6.1.2
@capacitor/android: 6.1.2
@capacitor/ios: 6.1.2

Installed Dependencies:

@capacitor/cli: 6.1.2
@capacitor/core: 6.1.2
@capacitor/android: 6.1.2
@capacitor/ios: 6.1.2

[success] Android looking great! �

Other API Details

npm --version: 10.2.5
node -v: v20.11.1

Platforms Affected

• Android
• iOS
• Web

Current Behavior

When I send a request to my server using fetch, the server get the request then send a response with 3xx status code, then the client throws TypeError: Failed to fetch, it's like adding redirect: "error" to the fetch request. However, when I use CapacitorHttp, everything works fine. I already have a website for my app, and everything works fine there. Did I do something wrong, or does fetch in Capacitor not handle 3xx status codes properly?

Expected Behavior

when using fetch api, and get response with 3xx status codes, the fetch api should not through error

Project Reproduction

https://github.com/Ammar1999y/fetch-error/blob/main/pages/_app.tsx

Additional Information

No response

[jcesarmobile]

NEXT_PUBLIC_API_URL is undefined, can you also provide the server code doing the redirect and steps to reproduce?

[Ammar1999y]

NEXT_PUBLIC_API_URL is undefined, can you also provide the server code doing the redirect and steps to reproduce?

NEXT_PUBLIC_API_URL is your server URL, I was using next.js at http://localhost:3001.

export async function GET() {
  return Response.json({ redirectByClient: "/home" /* Let the client to deal with the redirect */ }, {
    status: 307,
    headers: {
      "Access-Control-Allow-Origin": "*", 
      "Access-Control-Allow-Headers":
        "Content-Type, Authorization, content-type, authorization",
      "Content-Type": "application/json; charset=utf-8"
    },
  }); 
}
export function OPTIONS() {
  return new Response(null, {
    status: 204,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET,PUT,POST,DELETE",
      "Access-Control-Allow-Headers":
        "Content-Type, Authorization, content-type, authorization"
    },
  });
}

then I use redirectByClient on the client (front-end) side to redirect user if the status is 3xx, i even tried to add Location header, and all 3xx status code give this error.

And this is an example of Response headers from the server:

Access-Control-Allow-Headers:
Content-Type, Authorization, content-type, authorization
Access-Control-Allow-Origin:
*
Age:
0
Cache-Control:
public, max-age=0, must-revalidate
Content-Type:
application/json; charset=utf-8
Date:
Tue, 08 Oct 2024 05:39:55 GMT
Referrer-Policy:
strict-origin
Server:
Vercel
Strict-Transport-Security:
max-age=63072000; includeSubDomains; preload
Vary:
RSC, Next-Router-State-Tree, Next-Router-Prefetch
X-Vercel-Cache:
MISS
X-Vercel-Id:
cdg1::fra1::tvszr-1728365995088-0127de6d2a07

[jcesarmobile]

I meant a whole server project, not just a copy/paste of the file.

[Ammar1999y]

I meant a whole server project, not just a copy/paste of the file.

This is the client code and this is the sever code, and API URL https://server-gamma-eosin.vercel.app/api/redirect

I realize that when adding

  "plugins": {
    "CapacitorHttp": {
      "enabled": true
    }
  }

to capacitor.config.json every fetch with 3xx status code response gives that error.