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?
NSAppTransportSecurityinto yourInfo.plist?