#javascript #reactjs #api #twilio #sms
Вопрос:
Twilio.js:264 Uncaught TypeError: url.URL is not a constructor
Почему я получаю этот тип ошибки при использовании twilio sms api для отправки sms в 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));
}
Комментарии:
1. Эта ошибка выглядит так, как будто она находится в инструментах разработки браузера, вы пытаетесь запустить модуль Twilio в браузере?
2. О, я тоже вижу тег для ReactJS, так что я предполагаю, что вы запускаете это в браузере. Ответ на входящий.
3. О, рад слышать от вас @philnash, но я также пытался использовать экспресс-сервер, как вы упомянули в twilio.com/blog/send-an-sms-react-twilio но потом я получил ошибку cors «Управление доступом-Разрешить-Происхождение»
4. Для этого потребуется немного больше объяснений. В этом сообщении в блоге сервер и клиент работают через один и тот же хост, поэтому проблем с CORS быть не должно. Возможно, вы можете задать новый вопрос, который описывает, что вы сделали и как вы получили ошибку CORS, и мы можем над этим поработать?
5. Да, конечно, публикую…
Ответ №1:
Евангелист-разработчик Twilio здесь.
Модуль узла Twilio не должен использоваться в браузере и не будет работать. Это сделано намеренно, потому что вы не должны напрямую вызывать API Twilio из приложения на стороне клиента.
Чтобы вызвать API Twilio со стороны клиента, вам необходимо встроить идентификатор Sid вашей учетной записи и токен аутентификации, как я вижу, вы сделали в своем примере. Когда вы делаете это, вы предоставляете свои учетные данные любому, кто использует ваше приложение, и злоумышленник может извлечь ваши учетные данные и злоупотребить вашей учетной записью.
Вместо того, чтобы делать запросы к API со стороны клиента, вы должны передавать их через свой собственный сервер. Хорошей новостью является то, что у меня есть сообщение в блоге, за которым вы можете следить, в котором рассказывается, как отправить SMS из React с Twilio, в котором это подробно объясняется.
Ответ №2:
Это в значительной степени хорошо, что я допустил свою глупую ошибку, и вот мой код работает хорошо, я надеюсь, что это правильный способ, поэтому я запускаю свой сервер react js на 3000 портов и экспресс-сервер на 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);
})
}
Я просто приветствую, если требуется исправление, пожалуйста, дайте мне знать, потому что отображается только одно неперехваченное красное предупреждение (в обещании) Синтаксическая ошибка: неожиданный токен H в JSON в позиции 0
введите описание изображения здесь
дайте мне просто знать, что я упускаю или нуждаюсь в исправлении.