Can't send api requests from my frontend
I have the following base url defined:
const API_BASE_URL = process.env.GADGET_PUBLIC_WHATSAPP_API_BASE_URL;
And m calling this at various locations which is returning error at everypoint. Note that the same url works fine on the back end however it is http and not https if that can cause a problem. I added several debugging and logging but cant seem to pinpoint the problem exactly. Rand the same url in postman but works fine there:
const startSession = async () => {
setIsLoading(true);
setError('');
setDebugInfo('');
// Log to see the API_BASE_URL being used
console.log('API_BASE_URL:', API_BASE_URL);
console.log('Session Name:', session);
if (!API_BASE_URL || !session) {
setError('API_BASE_URL or session is undefined.');
setIsLoading(false);
return;
}
const endpoint =
console.log('Starting session with API:', endpoint); // Log the endpoint
try {
const response = await fetch(endpoint, { method: 'POST' });
const responseData = await response.text();
console.log('Start Session Response:', responseData);
setDebugInfo(
if (!response.ok) throw new Error(
} catch (err) {
setError(
setDebugInfo(
} finally {
setIsLoading(false);
}
};
const handleToggleSection = async (section) => {
if (activeSection === section) {
setActiveSection(null);
} else {
setActiveSection(section);
await startSession();
}
};
const API_BASE_URL = process.env.GADGET_PUBLIC_WHATSAPP_API_BASE_URL;
And m calling this at various locations which is returning error at everypoint. Note that the same url works fine on the back end however it is http and not https if that can cause a problem. I added several debugging and logging but cant seem to pinpoint the problem exactly. Rand the same url in postman but works fine there:
const startSession = async () => {
setIsLoading(true);
setError('');
setDebugInfo('');
// Log to see the API_BASE_URL being used
console.log('API_BASE_URL:', API_BASE_URL);
console.log('Session Name:', session);
if (!API_BASE_URL || !session) {
setError('API_BASE_URL or session is undefined.');
setIsLoading(false);
return;
}
const endpoint =
${API_BASE_URL}/sessions/${session}/startconsole.log('Starting session with API:', endpoint); // Log the endpoint
try {
const response = await fetch(endpoint, { method: 'POST' });
const responseData = await response.text();
console.log('Start Session Response:', responseData);
setDebugInfo(
Start Session Response: ${responseData}if (!response.ok) throw new Error(
Failed to start session: ${response.status} ${response.statusText}} catch (err) {
setError(
Failed to start session. Error: ${err.message}setDebugInfo(
Start Session Error: ${JSON.stringify(err, Object.getOwnPropertyNames(err))}} finally {
setIsLoading(false);
}
};
const handleToggleSection = async (section) => {
if (activeSection === section) {
setActiveSection(null);
} else {
setActiveSection(section);
await startSession();
}
};
