0

I'm using the latest version of Axios and built a React Native app using expo. Trying to run it in IOS simulator but it's not working. It's giving me a Network Error.

Here's my cors in index.js:

const corsOptions = {
    origin: function (origin, callback) {
        return callback(null, true);
    },
    credentials: true,
};
app.use(cors(corsOptions));

Here's where I use AXIOS

import axios from 'axios';
import MUser from './MUser';

const API_KEY = 'test_9088sss';
const BASE_URL = 'https://www.test.com/api';

class APICaller {
    static instance = null;

    static getInstance() {
        if (!APICaller.instance) {
            APICaller.instance = new APICaller();
        }
        return APICaller.instance;
    }

    constructor() {
        this.client = axios.create({
            baseURL: BASE_URL,
            headers: {
                'Content-Type': 'application/json',
                Accept: 'application/json',
                'api-key': API_KEY,
            },
        });

        // Axios response interceptor for 401 handling
        this.client.interceptors.response.use(
            (response) => response,
            async (error) => {
                const originalRequest = error.config;
                const status = error.response?.status;

                const token = await MUser.getUserToken();

                if (token && token.length > 0 && status === 401 && !originalRequest._retry) {
                    console.warn('⚠️ Access token expired — attempting refresh...');
                    originalRequest._retry = true;

                    const refreshed = await this.refreshAccessToken();
                    if (refreshed) {
                        console.log('✅ Token refreshed — retrying original request.');
                        const token = await MUser.getUserToken();
                        originalRequest.headers['Authorization'] = `Bearer ${token}`;
                        return this.client(originalRequest);
                    } else {
                        console.error('❌ Token refresh failed — logging out.');
                        await MUser.clearUserSession();
                        throw new Error('Session expired. Please log in again.');
                    }
                }
                return Promise.reject(error);
            }
        );

        // Axios request interceptor for token attachment and logging
        this.client.interceptors.request.use(
            async (config) => {
                const token = await MUser.getUserToken();
                if (token) {
                    config.headers.Authorization = `Bearer ${token}`;
                }

                console.log('🔵 Outgoing Request:', {
                    method: config.method?.toUpperCase(),
                    url: config.url,
                    baseURL: config.baseURL,
                    fullURL: `${config.baseURL}${config.url}`,
                    hasToken: !!token,
                    hasBody: !!config.data,
                });

                return config;
            },
            (error) => {
                console.error('❌ Request Interceptor Error:', error);
                return Promise.reject(error);
            }
        );
    }

    // Perform request with enhanced error handling
    async performCallToEndpoint(endpoint, method = 'GET', body = null) {
        try {
            console.log('📡 API Request:', {
                method,
                endpoint,
                baseURL: BASE_URL,
                fullURL: `${BASE_URL}${endpoint}`,
                hasBody: !!body,
            });

            const response = await this.client.request({
                url: endpoint,
                method,
                data: body,
            });

            console.log('✅ API Response:', {
                endpoint,
                status: response.status,
                hasData: !!response.data,
            });

            return this.parseResponse(response.data);
        } catch (error) {
            // Comprehensive error logging
            console.error('❌ API ERROR DETAILS:', {
                endpoint,
                method,
                message: error.message,
                code: error.code,
                status: error.response?.status,
                statusText: error.response?.statusText,
                responseData: error.response?.data,
                requestURL: error.config?.url,
                baseURL: error.config?.baseURL,
                fullURL:
                    error.config?.baseURL && error.config?.url
                        ? `${error.config.baseURL}${error.config.url}`
                        : 'N/A',
            });

            // Log specific error types for easier debugging
            if (error.code === 'ECONNABORTED') {
                console.error('🕐 Request Timeout - Server took too long to respond');
            } else if (error.code === 'ENOTFOUND') {
                console.error('🌐 DNS Lookup Failed - Host not found. Check BASE_URL:', BASE_URL);
            } else if (error.code === 'ECONNREFUSED') {
                console.error('🚫 Connection Refused - Is the server running on', BASE_URL, '?');
            } else if (error.code === 'ERR_NETWORK' || error.message === 'Network Error') {
                console.error('📡 Network Error - Check connectivity and CORS settings');
            } else if (error.response?.status === 404) {
                console.error('🔍 Not Found - Endpoint does not exist:', endpoint);
            } else if (error.response?.status === 500) {
                console.error('💥 Server Error - Internal server error');
            } else if (error.response?.status === 403) {
                console.error('🔒 Forbidden - Check API key and permissions');
            }

            const message = error.response?.data?.error || error.message || 'Unknown error';
            throw new Error(message);
        }
    }

    // Parse response
    parseResponse(data) {
        if (data.error) {
            throw new Error(data.error);
        }
        return data.result || data;
    }

    // Refresh access token
    async refreshAccessToken() {
        try {
            const token = await MUser.getUserToken();
            console.log(token);
            if (token && token.length > 0) {
                const response = await this.client.post('/user/refresh-token');
                if (response.status === 200) {
                    const newToken = response.data?.result?.token;
                    if (newToken) {
                        await MUser.setUserToken(newToken);
                        console.log('🔑 Access token updated successfully.');
                        return true;
                    }
                }
                console.error('❌ Refresh request failed with status', response.status);
                return false;
            }
        } catch (error) {
            console.error('❌ Refresh token error:', error.message);
            return false;
        }
    }
}

export default APICaller.getInstance();

I am using axios version 1.12.2

How can I resolve this?

9
  • What is the error? Commented Oct 24 at 1:37
  • Network Error. It says to check my cors settings but they are ok. @Paulw11 Commented Oct 24 at 1:39
  • Obviously they aren't because you are getting an error. CORS doesn't make much sense on an API unless it is being accessed from a web browser. Commented Oct 24 at 1:45
  • Do you know how I can start debugging to see what’s the issue and why it’s not accessible via iOS simulator? Commented Oct 24 at 1:53
  • This may be a reach, but can you add NSAppTransportSecurity into your Info.plist? Commented Oct 24 at 7:57

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.