Как удалить ошибку CORS из svelte Twilio API?

Моя цель - отправить текст в моем приложении. У меня был хост на 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);
  }
}

Как сделать HTTP-запрос в Javascript?
Как сделать HTTP-запрос в Javascript?
В JavaScript вы можете сделать HTTP-запрос, используя объект XMLHttpRequest или более новый API fetch. Вот пример для обоих методов:
Создание ресурсов API Laravel: Советы по производительности и масштабируемости
Создание ресурсов API Laravel: Советы по производительности и масштабируемости
Создание API-ресурса Laravel может быть непростой задачей. Она требует глубокого понимания возможностей Laravel и лучших практик, чтобы обеспечить...
Как создать простое погодное приложение на Python с API OpenWeatherMap
Как создать простое погодное приложение на Python с API OpenWeatherMap
Этот учебник проведет вас через процесс создания простого погодного приложения с помощью Python и OpenWeatherMap API.
Пакеты Java
Пакеты Java
Пакет java - это группа классов, интерфейсов и подпакетов схожего типа. Думайте об этом как о папке в каталоге файлов. Мы используем пакеты, чтобы...
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
В этом руководстве вы узнаете, как использовать API парсинга квитанций за 5 минут с помощью JavaScript. Eden AI предоставляет простой и удобный для...
1
0
102
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Здесь есть две проблемы. Во-первых, вы изменили экспорт в модули 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",

Как бы я передал динамический номер телефона в эту функцию? Скажем, у меня есть вход для ввода номера телефона и я хочу использовать его вместо жесткого кода строкового номера телефона?

lache 22.03.2022 19:52

Вы также можете отправлять запросы POST к функциям, поэтому вы можете обновить свой fetch, чтобы отправить номер телефона в теле запроса в виде JSON (fetch(url, { method: "POST", body: JSON.stringify({ phoneNumber }), headers: { "Content-Type": "application/json" }})), после чего вы можете получить доступ к phoneNumber из объекта event в функции как event.phoneNumber.

philnash 23.03.2022 00:06

Спасибо! Открыл отдельный вопрос о том же, но решил, что это может быть полезно другим!

lache 23.03.2022 02:51

Это способ переполнения стека! Рад, что это все работает для вас.

philnash 23.03.2022 02:53

Другие вопросы по теме