CORS: POST response not recognized on iOS

I’m having an issue where after making a POST request and receiving a 200 response with data the .then is not firing. I am using an NGINX server and Charles to monitor https traffic. The issue is happening on iOS and this exact setup is working fine both on browsers and on Android. There are also no errors that appear in the console on Xcode.

Here are the network headers for the request and response:
Request

POST /api/session HTTP/1.1
Host notmysite.com
Content-Type application/json;charset=utf-8
Origin capacitor://localhost
Connection keep-alive
Accept application/json, text/plain, */*
User-Agent Mozilla/5.0 (iPhone; CPU iPhone OS 13)
Content-Length 66
Accept-Language en-us
Accept-Encoding gzip, deflate, br

Response

HTTP/1.1 200 OK
Server nginx
Content-Type application/json; charset=utf-8
Content-Length 80
Access-Control-Allow-Origin http://localhost
Access-Control-Allow-Headers Origin X-Requested-With, Content-Type, Accept
X-Content-Type-Options nosniff
X-XSS-Protection 1; mode=block
X-Frame-Options SAMEORIGIN
Connection keep-alive

This is my server configuration:

location /api {
if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        #
        # Custom headers and headers various browsers *should* be OK with but aren't
        #
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        #
        # Tell client that this pre-flight info is valid for 20 days
        #
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
     }
    proxy_pass http://localhost:4000/api;
  }

And this is the code for the request in question:

axios.post(`${process.env.API_URL}/api/session`, {
        user: user,
      }).then(response => {
       if (response.status === 200) {
           this.props.login(response.data)
       }
    }).catch(err => {
        this.setState({error: err.response.data.message})
    })

I’ve been trying to figure this out for about a week now and I’m completely out of ideas. I am hoping someone has some ideas.

Have you tried attaching the Safari debugger to this and monitoring the network traffic? If not, please do that and take screenshots of the network tab w/ the request and response data.

I would recommend using Safari Technology Preview to do this.

I am using Xcode’s simulator to run the application and as far as I have been able to tell there isn’t a way to attach safari’s debugger. I was hoping to find a similar solution to Chrome’s dev tools solution for Android but I guess I’m out of luck there.

I have been using Charles proxy to intercept network traffic and as I posted above the calls succeed but nothing is happening afterwards.

You can attach a debugger using Safari dev tools: https://ionicframework.com/docs/troubleshooting/debugging#ios-and-safari

I apologize for the late reply, upgrading to Big Sur was a mistake.

Thanks for the tip on the technology preview, I wasn’t aware it added this functionality.
The network tab showed it was a cors issue. Multiple origins were being set and it wasn’t throwing an error. The technology preview is super helpful and I think would be worth adding to the debugging section of the documentation for iOS.

You have been very helpful, thank you!