尝试发布到 Twilio API 时出现 CORS 策略错误

德鲁·林奇

从 VueJS 应用程序中，我试图对 Twilio API 执行简单的 POST 以发送 SMS。执行 POST 时，我收到以下错误：

"Access to XMLHttpRequest at 'https://api.twilio.com/2010-04-01/Accounts/AC42exxxxxxxxxxcfa9c48/SMS/Messages' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field username is not allowed by Access-Control-Allow-Headers in preflight response."

违规代码如下：

sendTwilio(){
    const accountSid = process.env.TWILIO_ACCOUNT_SID;
    const authToken = process.env.TWILIO_AUTH_TOKEN;
    const sFromNumber = process.env.TWILIO_NUMBER;
    const sBaseURL = 'https://api.twilio.com';
    const phoneNumber = parsePhoneNumberFromString(this.sms.to_number,'US') 

    const headers = {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${authToken}`,
    'username': `${accountSid}`
    },

    sBodyText='Test'

    this.SmsUrl = sBaseURL + '/2010-04-01/Accounts/' + accountSid + '/SMS/Messages';

    if (phoneNumber.isValid()){
        this.sms.formattedPhone = phoneNumber.number;

        this.postData = 'From=' + sFromNumber 
        + '+To=' + phoneNumber.number 
        + '+Body=' + sBodyText

        axios.post(`${this.SmsUrl}`, this.postData, {
            headers: headers
        })
        .then((response) => {
            console.log(response)   
        })
        .catch((error) => {
            console.log(error)   
        })                    
    }
},

标题中用于用户名的格式有问题还是我的 CORS 设置有问题？

我的 CORS 设置如下：

CORS_ORIGIN_ALLOW_ALL = True

CORS_ORIGIN_WHITELIST = [        
    'http://localhost:8000',
    'http://localhost:8080',
    'http://127.0.0.1:8000'
]

伊夫森在线

Twilio 使用Basic Auth进行身份验证，因此在您POST使用时，axios您需要执行以下操作：

const headers = {
    'Content-Type': 'application/json'
};
const auth = {
    username: accountSid,
    password: authToken
}
[...]
axios.post(this.SmsUrl, this.postData, {
    auth: auth,
    headers: headers
})

我不确定你是如何使用它的。看看问题的评论。您永远不应该在浏览器应用程序中向客户端公开您的 Twilio 凭据。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。