从 svelte 应用程序发送文本到 twilio 功能

Question

仍然无法弄清楚这个 Cors 的事情它很烦人。尝试测试从输入发送文本到 twilio。我想从手机向动态号码发送短信。无论我做什么，我总是收到 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 错误。问题是您的函数将响应对象作为回调函数的第一个参数返回。该参数保留用于错误对象，而不是响应，并且 Twilio Functions 在收到错误作为回调函数的第一个参数时将创建自己的响应。该响应不包含 CORS 标头，因此您会收到 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 并将响应对象作为回调的第二个参数返回。

现在，您的前端代码也不会暴露您从中返回的错误，主要是因为当响应不正确时它会抛出自己的异常。尝试更新以解析错误正文，并使用您在错误中设置的 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 的错误消息，您将能够修复该问题。