從 svelte 應用發送短信至 twilio function

Question

仍然無法弄清楚這個 Cors 這件事很煩人。 嘗試測試從輸入向 twilio 發送文本。我想從我的手機向動態號碼發送文本。 無論我做什么，我都會收到 cors 錯誤？ 我肯定做錯了什么，我不允許從本地主機發送嗎？

斯維特應用程序

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 FUNCTION

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

我剛剛復制了您的 Function，將其部署到我自己的 Twilio 帳戶，並且能夠從localhost:5000向它成功fetch請求。

但是，如果我導致錯誤，例如，使用不正確from發件人號碼，那么我會收到 CORS 錯誤。 問題是您的 Function 正在返回response object 作為callback function 的第一個參數。該參數是為錯誤對象保留的，而不是為響應保留的，並且 Twilio 函數將在收到錯誤作為第一個參數時創建自己的響應回調 function。該響應不包括 CORS 標頭，因此您會收到 CORS 錯誤。

處理這種情況的方法是發送您的響應並自己設置狀態代碼。

因此，將您的 Function 更新為：

  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 作為回調的第二個參數返回。

現在，您的前端代碼也沒有公開您將從中返回的錯誤，主要是因為當響應不正確時它會拋出自己的異常。 嘗試更新以解析錯誤的主體並使用您在錯誤中設置的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 的錯誤消息，你將能夠修復它。