Http-пост метод не работает в Javascript - PullRequest
0 голосов
/ 31 октября 2019

Когда я делаю запрос http-post от html form, он работал. Но когда я делаю это, используя javascript, он выдает такую ​​ошибку

Доступ к XMLHttpRequest в 'https://www.something.php' из источника' null 'был заблокирован политикой CORS: Нет' AccessЗаголовок -Control-Allow-Origin 'присутствует на запрошенном ресурсе.

I inspect элемент и скопируйте как cUrl и попробуйте в Postman, и это работает. Пожалуйста, помогите, если яделает любую ошибку

мой HTML-код

<html>
<head>

<form action="https://www.something.php" method="POST" >
  <div class="container" style="width:100%;">
    <center></center>
  </div>
  <div class="container" style="width:100%;">
    <label for="userId"><b>UserId</b></label>
    <input type="number" placeholder="Enter Your User Id" name="userId" autofocus required>

    <label for="categoryId"><b>categoryId</b></label>
    <input type="number" placeholder="Enter categoryId" name="categoryId" required>

    <button type="submit" >GET DATA</button>
  </div>

</form>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>

<script>

  $(function() {
    var people = [];

    var userId=$('#userId').val();
    var categoryId=$('#categoryId').val();

    $.post('https://www.something.php',{userId:5 , categoryId:50},function(data) {
      $.each(data.video, function(i, f) {

        var link = "https://www.youtube.com/embed/"+ f.video;       
        var tblRows = "<tr>" +
          "<td>" + f.videoName + "</td>" + "<td>" + f.date + "</td>" + "<td>" + f.time + "</td>"  +
          "<td>" + f.videoDuration + "</td>" + "<td>" + f.liveStatus + "</td>" + "<td><a target='_blank' href='"+link+"'>"+link+"</a></td>" + "</tr>";
        $(tblRows).appendTo("#userdata tbody");

      });
    });
});
</script>

</head>
<body>

  <div class="wrapper">
    <div class="profile">
      <table id= "userdata" width="50%" border="2">
        <thead>
          <th>VIDEO NAME</th>
          <th>DATE</th>
          <th>TIME</th>           
          <th>DURACTION</th>
          <th>LIVE STATUS</th>
          <th>LINK</th>
        </thead>
      <tbody>
      </tbody>
    </table>

  </div>
</div>
</div>
</html>

Ответы [ 3 ]

0 голосов
/ 31 октября 2019

Это происходит потому, что вы не можете запросить ресурс другого источника, если отсутствуют XORS-заголовки.

Добавьте XORS-заголовок к запрашиваемому файлу (в данном случае - что-то .php. ", например:

header("Access-Control-Allow-Origin: *;

Это разрешает доступ к этому ресурсу со всех доменов, вы должны разрешить доступ только с того домена, с которого запрашиваете, например:

header("Access-Control-Allow-Origin: mywebsite.com;
0 голосов
/ 31 октября 2019

Во-первых, структура, которой вы руководствуетесь, неверна. Не следует помещать содержимое, которое будет отображаться в браузере, внутри тега head. Тег head должен содержать только метатеги и другую скрытую информацию, такую ​​как область просмотра и др.

Является ли URL "https://www.something.php" на том же сервере, откуда вы его вызываете? Или на другом сервере? сервер?

Если html-файл и php-файл находятся в одном месте, вы не должны получать эту ошибку. Попробуйте запустить html-файл с локального хоста, а не с использованием полного пути к файлу. html файл не находится в папке var / www, затем переместите его туда и запустите файл, он больше не должен вызывать ошибку cors, если оба файла находятся на одном сервере. Я попытался запустить ваш код с localhost, и он работает.

Если вы звоните на этот сервер со своего локального компьютера или из любой другой системы, есть вероятность, что вы допустите ошибку CORS, если вы не укажете ниже в заголовках.

Access-Control-Allow-Origin: yourwebsiteurl.com

Этопроисходит потому, что по умолчанию все серверы блокируют любой запрос XMLHTTP, поступающий из других доменов. Это сделано в целях безопасности.

Если у вас естьПерейдите на другой сервер, затем вы можете просто добавить источник разрешения в заголовки этого сервера. php config.

Я создал некоторый код с помощью curl, пожалуйста, посмотрите и попробуйте его в своем коде.

Глядя на ваш код, вы видите, что вы нажали что-то на .php и получаете некоторый контент для привязки в таблице ниже с помощью id = "userdata"

Итак, сначала, если вы создали HTML-страницу, чем выПридется создать новую страницу php. Скопируйте все, что у вас есть в HTML-файл, просто удалите все действия AJAX. Теперь вставьте приведенный ниже код перед разделом, в котором вы создаете таблицу.

<?php
// make sure you have curl extension enable in you php
$ch = curl_init();

curl_setopt($ch, CURLOPT_URL,"https://www.something.php");
curl_setopt($ch, CURLOPT_POST, 1);

// In real life you should use something like:
curl_setopt($ch, CURLOPT_POSTFIELDS, 
     http_build_query(array('userId' => 5,'categoryId'=>50)));

// Receive server response ...
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$server_output = curl_exec($ch);

curl_close ($ch);

. $ Server_output будет содержать данные, возвращаемые из вышеупомянутого используемого URL-адреса. Далее анализируйте данные, используя цикл for, и сгенерируйте данные таблицы, которыеВы хотите связать. Tr и td будут сгенерированы внутри цикла for.

Я не могу выполнять дальнейшую работу, поскольку у меня нет ссылок на данные или URL-адрес, поэтому вы сами по себе отсюда.

Я обновил ваш код вместе со структурой и разместил содержимое в нужном месте. Пожалуйста, взгляните на приведенный ниже код.

<html>
<head>
</head>
<body>
<?php
$ch = curl_init();

curl_setopt($ch, CURLOPT_URL,"https://www.something.php");
curl_setopt($ch, CURLOPT_POST, 1);

curl_setopt($ch, CURLOPT_POSTFIELDS, 
     http_build_query(array('userId' => 5,'categoryId'=>50)));

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$server_output = curl_exec($ch);

curl_close ($ch);

?>
<form action="https://www.something.php" method="POST" >
<div class="container" style="width:100%;">
<center></center>
</div>
<div class="container" style="width:100%;">
<label for="userId"><b>UserId</b></label>
<input type="number" placeholder="Enter Your User Id" name="userId" autofocus required>

<label for="categoryId"><b>categoryId</b></label>
<input type="number" placeholder="Enter categoryId" name="categoryId" required>

<button type="submit" >GET DATA</button>
</div>

</form>
<div class="wrapper">
<div class="profile">
  <table id= "userdata" width="50%" border="2">
    <thead>
      <th>VIDEO NAME</th>
      <th>DATE</th>
      <th>TIME</th>           
      <th>DURACTION</th>
      <th>LIVE STATUS</th>
      <th>LINK</th>
    </thead>
  <tbody>
    <!-- here you will loop through the data you have received from curl and fill it in the tbody, and this entrie thing will be done when the page loads -->
    <?php foreach ($server_output as $value) {
        ?>
            <tr>
                <td>
                    <?= $value['key'] ?>
                </td>
            </tr>
        <?php
    } ?>
  </tbody>
</table>

</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
</script>
</body>
</html>

Надеюсь, это поможет

0 голосов
/ 31 октября 2019

Эта проблема CORS заблокирована вашим браузером. Вы можете прочитать о том, почему и как работает CORS Здесь

Краткое объяснение состоит в том, что это происходит потому, что сервер / сервер не доверяет вашему интерфейсу.

Чтобы этого не случилось, вы можете сделать:

  1. Не рекомендуется. поскольку это решит проблему только в вашем браузере.
    Отключить CORS проверку вашего браузера. Вы можете использовать это расширение здесь.
  2. Измените внутренний код, чтобы разрешать запросы с вашего IP / URL. Вы можете узнать больше об этом здесь , если вы используете Node.

Если вы в настроении прыгнуть в глубину CORS. Не стесняйтесь проверить эти ссылки

  1. https://www.codecademy.com/articles/what-is-cors
  2. https://www.geeksforgeeks.org/cross-origin-resource-sharing-cors/
  3. https://www.w3.org/TR/cors/
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...