如何从 svelte Twilio API 中删除 CORS 错误？

Question

我的目标是在我的应用程序中发送文本。我在 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-functions 试过这个：

我的斯维特

<script>
  const handleText = async () => {
    const response = await fetch("https://svelte-service-xxxx.twil.io/sms");
    const data = await response.json();
    console.log(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);
  }
}

Answer 1

这里有两个问题。首先，您将导出更改为 ES 模块，目前 Twilio Functions 不支持该模块。所以你有：

export async function handler(context, event, callback) {

但应该是：

exports.handler = async function (context, event, callback) {

您首先在这里看到了 CORS 问题，因为 Twilio 函数在损坏时的响应不包括 CORS headers。但是，您仍然存在 CORS 问题。

当浏览器发送 Origin header 时，它没有尾部斜杠。 Origin 必须匹配 Access-Control-Allow-Origin header 中的 URL。因此，您需要更改 header 以删除结尾的斜杠：

    "Access-Control-Allow-Origin": "https://xxxxx.netlify.app",

如何从 svelte Twilio API 中删除 CORS 错误？

How to remove CORS error from svelte Twilio API?

api

twilio

cors

twilio-api

svelte