Twilio.js:264 Uncaught TypeError: url.URL 不是构造函数

Question

Twilio.js:264 Uncaught TypeError: url.URL is not a constructor

为什么我在使用 twilio sms api 在 react js 中发送短信时会收到此类错误

这是我的代码

const accountSid = "ACa7e54c4******391cc08f61bd";
const authToken = "0ab3a929*****c4be9466b6878";
const client = require('twilio')(accountSid, authToken);

const send_sms = (type)=>{
    client.messages
      .create({from: '+19547***', body: 'body', to: '+917828***4'})
      .then(message => console.log(message.sid));
} 

Answer 1

这里是 Twilio 开发者布道者。

Twilio Node module 不能在浏览器中使用，将无法工作。这是有意为之，因为您不应直接从客户端应用程序调用 Twilio API。

为了从客户端调用 Twilio API，您需要嵌入您的帐户 Sid 和身份验证令牌，正如我在示例中看到的那样。当您这样做时，您会将您的凭据暴露给使用您的应用程序的任何人，而恶意用户可能会提取您的凭据并滥用您的帐户。

与其从客户端向 API 发出请求，不如通过自己的服务器代理它们。好消息是，我有一篇博文供您参考，其中详细介绍了how to send an SMS from React with Twilio。

Answer 2

<块引用>

很好，我犯了一个愚蠢的错误，这是我的代码 运行良好，我希望这是正确的方法，我在 3000 端口上运行我的 react js 服务器，在 4000 端口上运行快速服务器，所以它运行良好..

//index.js for express server 

const express = require('express'); 
const cors = require('cors');
const twilio = require('twilio'); 

//twilio requirements -- Texting API 
const accountSid = 'ACa7********************1bd';
const authToken = '0ab*****************6b6878'; 
const client = new twilio(accountSid, authToken);

const app = express(); 
app.use(cors()); 

app.get('/api', (req, res) => {
    res.send('Server Running')
})

app.post('/api/send-sms', (req, res) => {
    res.send('Hello to the Twilio Server')
    const {  msg } = req.query;
    client.messages.create({
        body: "Hello mesage from twilio ..",
        to: "+917******784",  
        from: '+19*******13'
    }).then((message) => console.log(message.body));
})
app.listen(4000, () => console.log("Running on Port 4000"))

<块引用>

这是onClick事件触发的函数

const send_sms = (type)=>{

    fetch('http://localhost:4000/api/send-sms', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(msg)
    })
    .then(res => res.json())
    .then(data => {
        console.log(data);
    })

}

<块引用>

如果需要更正请让我知道，因为它只显示一个红色警报未捕获（承诺）语法错误：JSON 中的意外标记 H，位于位置 0

enter image description here

<块引用>

让我知道我遗漏了什么或需要更正。