将文本从 svelte 应用程序发送到 twilio 函数

Question

仍然无法理解这个 Cors 的东西，这很烦人。尝试测试将文本从输入发送到 twilio。我想从我的 phone 发送短信到一个动态号码。无论我做什么，我都会不断收到 cors 错误？我肯定做错了什么，我不允许从本地主机发送吗？

SVELTE 应用程序

let phoneNumber = "";

const handleSendText = () => {
    fetch("https://svelte-service-9106.twil.io/sms", {
      method: "POST",
      body: JSON.stringify({
        to: phoneNumber,
        from: "+11111111111",
      }),
      headers: {
        "Content-Type": "application/json",
      },
    })
      .then((response) => {
        if (!response.ok) {
          throw new Error("failed");
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };

 <input type="text" bind:value={phoneNumber} />
 <button on:click={handleSendText}>Send</button>

TWILIO 函数

exports.handler = async function (context, event, callback){
  const twilioClient = context.getTwilioClient();
  
  const messageDetails = {
    body: "Ahoy, Svelte developer!",
    to: event.to,
    from: event.from,
  }
  
  const response = new Twilio.Response();
  
  const headers = {
    "Access-Control-Allow-Origin" : "http://localhost:5000",
    "Access-Control-Allow-Methods": "GET,PUT,POST,DELETE,OPTIONS",
    "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);
  }
}

错误

Answer 1

我刚刚复制了您的函数，将其部署到我自己的 Twilio 帐户，并且能够从 localhost:5000.

向它发出成功的 fetch 请求

但是，如果我因使用不正确的 from 号码而导致错误，那么我会收到 CORS 错误。问题是您的函数返回 response object 作为 callback 函数的第一个参数。该参数是为错误 object 保留的，而不是为响应保留的，Twilio Functions 将在收到错误作为回调函数的第一个参数时创建自己的响应。该响应不包括 CORS headers，因此您会收到 CORS 错误。

处理这个问题的方法是发送你的回复并自己设置状态码。

因此，将您的函数更新为：

  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.message
    });
    response.setStatusCode(400);
    return callback(null, response);
  }

您可以看到，在 catch 块中，我将状态代码设置为 400 并将响应 object 作为回调的第二个参数返回。

现在，您的 front-end 代码也没有公开您将从中返回的错误，主要是因为当响应不正确时它会抛出自己的异常。尝试更新以解析错误的 body 并使用您在错误中设置的 status 属性抛出错误。

fetch("https://svelte-service-9106.twil.io/sms", {
  method: "POST",
  body: JSON.stringify({
    to: phoneNumber,
    from: "+111111111111",
  }),
  headers: {
    "Content-Type": "application/json",
  },
})
  .then((response) => {
    if (!response.ok) {
      response.json().then((body) => { 
        throw new Error(body.status);
      })
    } else {
    console.log("Success"); }
  })
  .catch((err) => {
    console.log(err);
  });

像这样更新后，您仍然会收到错误，但错误将包含来自 API 的错误消息，您将能够修复它。

将文本从 svelte 应用程序发送到 twilio 函数

send a text from svelte app to twilio function

api

http-post

twilio

cors

twilio-api