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

Question

我的目标是在我的应用程序中发送文本。我在 netlify 上托管过，但也在 localhost:5000 上托管过，但都不起作用。我正在使用 svelte 和 twilio。我收到以下错误：

可以从“https://svelte-service-xxxx.twl.io/sms”获取数据 来源“https://xxxxxxx.netlify.app”已被阻止 CORS 策略： 上不存在“Access-Control-Allow-Origin”标头 请求的资源。如果不透明的响应满足您的需求，请设置 请求的模式为“no-cors”以在禁用 CORS 的情况下获取资源。

我在教程中使用无服务器功能并复制了所有代码。我在上面找不到任何东西？我该如何解决 CORS 问题？

教程：https://www.twilio.com/blog/send -sms-svelte-twilio-功能 尝试过这个：没有“访问权限” -Control-Allow-Origin' 标头出现在请求的资源上 - 当尝试从 REST API 获取数据时

MYSVELTE

<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>

MY FUNCTION IN 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 标头。但是，您仍然遇到 CORS 问题。

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

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