Question:
How to connect an iFrame to a wwebservice displaying datas from collections ?
Product:
Wix Studio Editor
What are you trying to achieve:
I want to access to some back-end datas through an iFrame. The fact is that I’m always having CORS errors despite the fact that I’m setting headers as needed in my http-functions.js file
What have you already tried:
You can see here how my http-functions.js file looks like :
import { ok, notFound, serverError, WixHttpFunctionResponse } from 'wix-http-functions';
import wixData from 'wix-data';
import { getOpeningHours } from 'backend/openingHours.web.js';
function addCorsHeaders(response) {
response.headers = response.headers || {};
response.headers['Access-Control-Allow-Origin'] = '*';
response.headers['Access-Control-Allow-Methods'] = 'GET, OPTIONS';
response.headers['Access-Control-Allow-Headers'] = 'Content-Type';
return response;
}
export function handler(event) {
if (event.httpMethod === 'OPTIONS') {
return addCorsHeaders({
status: 200,
headers: {
'Content-Type': 'application/json'
}
});
}
try {
const date = new Date(event.query.date);
return getOpeningHours(date)
.then(openingHoursData => {
if (openingHoursData) {
return addCorsHeaders(ok({
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
data: openingHoursData
})
}));
} else {
return addCorsHeaders(notFound({
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
error: 'Opening hours not found for the specified date'
})
}));
}
})
.catch(err => {
console.error(err);
return addCorsHeaders(serverError({
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
error: 'An error occurred while retrieving opening hours'
})
}));
});
} catch (err) {
console.error(err);
return addCorsHeaders(serverError({
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
error: 'An unexpected error occurred'
})
}));
}
}
and here is a part of my iFrame code :
async function fetchOpeningHours() {
try {
const currentDate = new Date().toISOString();
const url = `https://username.wixstudio.io/_functions/handler?date=${currentDate}`;
const response = await fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const openingHours = await response.json();
console.log('isOk');
displayOpeningHours(openingHours);
} catch (error) {
console.error('Erreur lors de la récupération des heures d\'ouverture:', error);
document.getElementById('test').textContent = 'Erreur lors de la récupération des heures d\'ouverture';
}
}
But I keep getting this error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://username.wixstudio.io/_functions/handler?date=2024-05-21T13:22:11.196Z. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 500.
(on firefox)
I’ts been days since I’(m trying to fix those CORS troubles, I’m so desperate that I’m starting to ask myself if I should continue trying to do anything.
UPDATE: It seems that even when I’m following tutos or testing de default code, I cannot access to any webservice with Velo. It like nothing is existing in my back-end code from my front-end POV
Anyone could tell me what should I do?
Thanks for your help
