使用Twilio API、PHP和HTML调用变量时遇跨域及类型错误

核心错误原因分析 #

从你的Chrome控制台报错可以看到，最关键的问题是：

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

这是因为你直接双击打开本地的source.html文件，浏览器会用file://协议加载页面，而AJAX请求不允许在file://协议下访问本地PHP文件。另外，PHP代码必须在Web服务器环境中才能被解析执行，直接打开PHP文件只会显示源码，根本无法运行Twilio的API调用逻辑。

分步解决方案 #

1. 启动本地Web服务器 #

你需要把项目放到Web服务器环境中运行，最简单的方式是使用PHP内置服务器：

• 打开终端/命令提示符，进入你的项目文件夹（包含sendnotifications.php和source.html的目录）
• 运行命令：

  php -S localhost:8000
  

这会在本地启动一个临时服务器，端口为8000。

2. 通过服务器地址访问页面 #

不要再双击打开source.html，而是在浏览器地址栏输入：

http://localhost:8000/source.html

这样页面会通过http协议加载，AJAX请求就能正常访问同域下的sendnotifications.php了。

3. 完善Twilio PHP代码 #

你的sendnotifications.php目前只获取了手机号，缺少Twilio API调用和JSON响应的逻辑，补充完整的示例代码：

<?php
// 引入Twilio SDK（如果用Composer安装，先执行composer require twilio/sdk）
require_once 'vendor/autoload.php';

use Twilio\Rest\Client;

// 从Twilio控制台获取你的账号信息
$twilioSid = '你的Twilio账号SID';
$twilioToken = '你的Twilio Auth Token';
$twilioPhoneNumber = '你的Twilio电话号码（格式如+1234567890）';

// 获取表单提交的手机号
$targetPhone = $_POST['phone'];
$response = ['sms_sent' => 'FAIL'];

try {
    // 初始化Twilio客户端
    $client = new Client($twilioSid, $twilioToken);
    // 发送短信
    $message = $client->messages->create(
        $targetPhone,
        [
            'from' => $twilioPhoneNumber,
            'body' => '这是来自Twilio的测试短信！'
        ]
    );
    // 发送成功，更新响应状态
    $response['sms_sent'] = 'OK';
} catch (Exception $e) {
    // 捕获错误，可记录到日志方便排查
    error_log('Twilio发送失败：' . $e->getMessage());
}

// 设置响应头为JSON格式，返回结果
header('Content-Type: application/json');
echo json_encode($response);
?>

4. 升级jQuery版本 #

你当前使用的jQuery 1.4.2非常老旧，存在很多兼容性问题，建议替换为最新稳定版：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

额外注意事项 #

• 确保你的Twilio账号已经激活，并且有可用的余额和验证过的接收号码（测试阶段只能发送到验证过的号码）
• 接收手机号必须符合E.164格式（比如+86138xxxxxxx）
• 不要把Twilio的SID和Token硬编码在代码里，建议使用环境变量或者配置文件管理敏感信息

内容的提问来源于stack exchange，提问作者Joris