Моя цель - отправить текст в моем приложении. У меня был хост на netlify, но также был и на localhost: 5000, ни один из них не работал. Я использую svelte и twilio. Я получаю следующую ошибку:
Access to fetch at 'https://svelte-service-xxxx.twil.io/sms' from origin 'https://xxxxxxx.netlify.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Я использую бессерверную функцию в учебнике и скопировал весь этот код. Я не могу ничего найти на нем? Как мне обойти эту штуку CORS?
Учебник: https://www.twilio.com/blog/send-sms-svelte-twilio-функции Пробовал это:В запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin» — при попытке получить данные из REST API.
МИСВЕЛТЕ
<script>
const handleText = async () => {
const response = await fetch("https://svelte-service-xxxx.twil.io/sms");
const data = await response.json();
console.info(data);
status = data.status;
};
</script>
МОЯ ФУНКЦИЯ В TWILIO (согласно туториалу)
export async function handler(context, event, callback) {
const twilioClient = context.getTwilioClient();
const messageDetails = {
body: "Ahoy, Svelte developer!",
to: "+xxxxxxxxxx",
from: "+xxxxxxxxxx"
}
const response = new Twilio.Response();
const headers = {
"Access-Control-Allow-Origin": "https://xxxxx.netlify.app/",
"Access-Control-Allow-Methods": "GET,PUT,POST,DELETE,OPTIONS",
"Access-Control-Allow-Headers": "Content-Type", <<----?????
"Content-Type": "application/json"
};
response.setHeaders(headers);
try {
const message = await twilioClient.messages.create(messageDetails);
response.setBody({
status: `Your message was sent successfully with SID: ${message.sid}`
});
return callback(null, response);
} catch(error) {
response.setBody({
status: error
});
return callback(response);
}
}
Здесь есть две проблемы. Во-первых, вы изменили экспорт в модули ES, которые в настоящее время не поддерживаются функциями Twilio. Так что у тебя есть:
export async function handler(context, event, callback) {
но должно быть:
exports.handler = async function (context, event, callback) {
Вы сталкивались с проблемой CORS, потому что ответ от функции Twilio, когда она сломана, не включает заголовки CORS. Однако у вас все еще есть проблема с CORS.
Когда браузер отправляет заголовок Origin
, он делает это без завершающей косой черты. Этот Origin
должен соответствовать URL-адресу в заголовке Access-Control-Allow-Origin
. Итак, вам нужно изменить заголовок, чтобы удалить завершающую косую черту:
"Access-Control-Allow-Origin": "https://xxxxx.netlify.app",
Вы также можете отправлять запросы POST к функциям, поэтому вы можете обновить свой fetch
, чтобы отправить номер телефона в теле запроса в виде JSON (fetch(url, { method: "POST", body: JSON.stringify({ phoneNumber }), headers: { "Content-Type": "application/json" }})
), после чего вы можете получить доступ к phoneNumber из объекта event
в функции как event.phoneNumber
.
Спасибо! Открыл отдельный вопрос о том же, но решил, что это может быть полезно другим!
Это способ переполнения стека! Рад, что это все работает для вас.
Как бы я передал динамический номер телефона в эту функцию? Скажем, у меня есть вход для ввода номера телефона и я хочу использовать его вместо жесткого кода строкового номера телефона?