Ошибка API Twilio: из источника 'null' был заблокирован политикой CORS: Ответ на запрос предварительной проверки не пропускает доступ - PullRequest
Новая
       6

Ошибка API Twilio: из источника 'null' был заблокирован политикой CORS: Ответ на запрос предварительной проверки не пропускает доступ

0 голосов
/ 13 февраля 2020

вот полная ошибка в журнале консоли: index. html: 1 Доступ к XMLHttpRequest по адресу https://api.twilio.com/2010-04-01/Accounts/ACxACd7cc7bb2098ad82117c5025a02de6e1d/Messages.json из источника 'null' был заблокирован политикой CORS: Ответ на предпечатную проверку запрос не проходит проверку контроля доступа: он не имеет статуса HTTP ok.

Я пытаюсь настроить Twilio API в своем коде. Я хочу, чтобы смс-сообщение отправлялось, когда кто-то нажимает кнопку отправки. Мне не повезло. У кого-нибудь есть идеи, где я ошибаюсь?

Большое вам спасибо за помощь!

Роб 

$(document).ready(function() {
  $("#btnSubmit").click(function() {
    // Your Twilio credentials
    var SID = "xxxxxx"
    var Key = "xxxxxx"

    $.ajax({
      type: 'POST',
      url: 'https://api.twilio.com/2010-04-01/Accounts/' + SID + '/Messages.json',
      data: {
        "To": "+16195362030",
        "From": "+16193047988",
        "Body": "Hello World"
      },
      beforeSend: function(xhr) {
        xhr.setRequestHeader("Authorization", "Basic " + btoa(SID + ':' + Key));
      },
      success: function(data) {
        console.log(data);
      },
      error: function(data) {
        console.log(data);
      }
    });
  });
});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href='./assets/style.css'>
  <script src="https://kit.fontawesome.com/81d086c017.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css">
  <link href="https://fonts.googleapis.com/css?family=Righteous|Titillium+Web&display=swap" rel="stylesheet">
  <div id="currencyPDF"></div>
  <title> CurrencyExchangePro V2 </title>
</head>

<body>

  <nav class="navbar is-focused is-fluid" id="color2" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">
        <h1 id="fontColor1" class='titleText'>CurrencyExchangePro</h1>
      </a>
      <!-- hehe -->


      <a role="button" class="" aria-label="menu" aria-expanded="" data-target="navbarBasicExample">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>

    <div id="navbarBasicExample" class="navbar-menu">

      <div></div>


      <div class="navbar-end">
        <div class="navbar-item">
          <h2 id="fontColor1" class="dateToday"></h2>
        </div>
      </div>
    </div>
  </nav>


  <!-- Body-->

  <!-- Top Section -->
  <div id="color1" class="columns mainArea mainbox is-fluid">


    <!-- Outer-->
    <div class="column is-1.5">
    </div>

    <!-- Country 1-->

    <div id="color2withBorder" class="column is-4 currency1">
      <div class="field">
        <label class="label boxHeader">Currency to convert from:</label>
        <div class="control">
          <div><img id="flag1" src="http://www.countryflags.io/AE/flat/64.png" /></div>
          <div class="select">
            <select class="boxes" id="box1">
              <option>Pick a Currency...</option>
            </select>
          </div>
        </div>
      </div>
      <div class="field">
        <label class="label ammountText">Principal Amount:
                </label>
        <div class="control">
          <input class="input" type="text" placeholder="1.00" id="currency1Ammount">
        </div>

      </div>

      <div class="column has-background-light country1data">
        <p class="has-text-left updated1">Last Updated:</p>
        <p id="updatedTime1"></p>


      </div>

    </div>
    <!-- Blank Area Seperating-->
    <div class="column is-1 has-background-blank"></div>


    <!-- Country 2 -->
    <div id="color2withBorder" class="column is-4 currency2">
      <div class="field">
        <label class="label boxHeader">Currency to convert to:</label>
        <div><img id="flag2" src="http://www.countryflags.io/AE/flat/64.png" /></div>
        <div class="control">
          <div class="select">
            <select class="boxes" id="box2">
              <option>Pick a Currency...</option>
            </select>
          </div>
        </div>
      </div>
      <div class="field">
        <label class="label ammountText">Desired Amount:
                </label>
        <div class="control">
          <input class="input" type="text" placeholder="1.00" id="currency2Ammount"></p>
        </div>

      </div>


      <div class="column has-background-light top-auto currency2data">
        <p class="has-text-left" id="updated2">Exchange Rate:</p>
        <p id="exchange"></p>


      </div>

    </div>

    <!-- Outer Colomn-->
    <div class="column is-1">

    </div>

  </div>


  <!-- section 2 -->

  <div id="smallHeight" class="color1 columns mainArea mainbox is-fluid">


    <!-- Outer-->
    <div class="column is-1.5">
    </div>

    <!-- Calculate-->

    <div class="column is-4 calButtonDiv" id="color1">
      <button id="calBtn" class="button calButton color4">Calculate</button>
    </div>


    <!-- Blank Area Seperating-->
    <div id="zeroPadding" class="column is-1 has-background-blank"></div>


    <!-- PDF -->
    <div class="column is-4 zeroPadding" id="color1">
      <button id="pdfBtn" class="button pdfButton color4"><a href="javascript:demoFromHTML()">Generate PDF</a>
            </button>
    </div>

    <!-- Outer Colomn-->
    <div class="column is-1">

    </div>

  </div>

  <!-- TWILIO APO-->
  <div id="email" class="color1 columns mainArea mainbox is-fluid">
    <div class="column is-7">
        <div class="control">
          <button id='btnSubmit' class="button is-primary">Submit</button>
        </div>
      </div>
    </div>
    <div class='column is-4'>
      <p class='info'>Stay Up To Date</p>
    </div>
  </div>
  </div>
  </div>
  </div>


  <div id="color2" class="columns is-mobile last5 fiveArea">
    <div id="color1withBorder" class="column is-one-third is-offset-one-quarter has-text-centered fiveArea is-focused fontColor3">Previous Currency Checks</div>
    <div id="color1withBorder" class="column is-2 has-text-centered fiveArea is-focused fontColor3">Refresh</div>
  </div>
  <div class="container-fluid is-centered tableSpace">
    <div id="tableCenter" class="columns is-centered color2">
      <div id="tableCenter" class="column is-narrow color2">
        <table id="tableCenter" class="table is-12">
          <tr>
            <th>Search # </th>
            <th>Cur. 1 </th>
            <th>Cur. 1 $</th>
            <th>Cur. 2</th>
            <th>Cur. 2 $</th>
            <th>Exhange Rate</th>
            <th>Date</th>

          </tr>
          </thead>
          <!--
                    <tbody>
                        <tr>
                            <td id="search1">--</td>
                            <td id="key1-1History">N/A</td>
                            <td id="value1-1History">--</td>
                            <td id="key1-2History">N/A</td>
                            <td id="value1-2History">--</td>
                            <td id="exchange1Rate">00.00%</td>
                            <td id="date1">--/--/----</td>

                        </tr>
                        <tr>
                            <td id="search2">--</td>
                            <td id="key2-1History">N/A</td>
                            <td id="value2-1History">--</td>
                            <td id="key2-2History">N/A</td>
                            <td id="value2-2History">--</td>
                            <td id="exchange2Rate">00.00%</td>
                            <td id="date2">--/--/----</td>
                        </tr>
                        <tr>
                            <td id="search3">--</td>
                            <td id="key3-1History">N/A</td>
                            <td id="value3-1History">--</td>
                            <td id="key3-2History">N/A</td>
                            <td id="value3-2History">--</td>
                            <td id="exchange3Rate">00.00%</td>
                            <td id="date3">--/--/----</td>
                        </tr>
                        <tr>
                            <td id="search4">--</td>
                            <td id="key4-1History">N/A</td>
                            <td id="value4-1History">--</td>
                            <td id="key4-2History">N/A</td>
                            <td id="value4-2History">--</td>
                            <td id="exchange4Rate">00.00%</td>
                            <td id="date4">--/--/----</td>
                        </tr>
                        <tr>
                            <td id="search5">--</td>
                            <td id="key5-1History">N/A</td>
                            <td id="value5-1History">--</td>
                            <td id="key5-2History">N/A</td>
                            <td id="value5-2History">--</td>
                            <td id="exchange5Rate">00.00%</td>
                            <td id="date5">--/--/----</td>
                        </tr>
                         -->

          </tbody>
        </table>

      </div>

      </table>

    </div>
  </div>

  <!-- js library - jquery -->

  <div id="footer">
    <footer>
      Rob Connoly, Matt Bell, and Greg Schuman. Copyright 2020.<br> Made with <i class="fas fa-heart"></i> at UCSD Coding Bootcamp!
    </footer>
  </div>
  <!-- js library - jquery -->
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <!-- js library - moment.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
  <!-- js library - underscore.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
  <!-- external logic sheets -->
  <script src="./assets/iso-codes.js"></script>
  <script src="./assets/logic.js"></script>
  <!-- pdf logic sheet -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>

</body>

</html>
...