CORS-issue - «На запрашиваемом ресурсе отсутствует заголовок« Access-Control-Allow-Origin ».»

Question

Итак, я пытался передать данные из моего внешнего интерфейса в мой внутренний (однако я не очень опытен в этой области). Однако данные поступают, если я пытаюсь вставить данные в MySQL-DB через PDO, браузер выдаст мне следующую ошибку:

Не удалось загрузить http://localhost:8888/post_recipe.php: Ответ на запрос предварительной проверки не проходит проверку контроля доступа: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin». Происхождение 'http://localhost:3000' поэтому не допускается. Если непрозрачный ответ соответствует вашим потребностям, установите режим запроса «no-cors», чтобы получить ресурс с отключенным CORS. "

JS

postToAPI = () => {
  fetch(`http://localhost:8888/post_recipe.php`, {
    method: 'POST',
    headers: {
        'Content-Type': 'text/html'
    },
    mode: 'cors',
    body: JSON.stringify({
      title: this.state.title,
      description: this.state.description,
      userID: this.props.userInfo.response.id,
      name: this.props.userInfo.response.name,
      stepByStep: (this.state.stepByStep),
      recipeIngredients: (this.state.recipeIngredients),
      profileImg: this.props.userInfo.response.picture.data.url
    })
  })
    .then((response) => response.json())
      .then((fetch) => {
        console.log(fetch)
      });
  }

PHP

<?php

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Credentials: true');
header("Content-type: text/html; charset=utf-8");
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

$post = json_decode(file_get_contents('php://input'));
$array = json_decode(json_encode($post), True);

$pdo = new PDO(
  "mysql:host=localhost:8889;dbname=veganify;charset=utf8",
  "root",
  "root"
);

$statement = $pdo->prepare(
    "INSERT INTO posts (title, description, userID, name, stepByStep, recipeIngredients, profileImg)
    VALUES (:title, :description, :userID, :name, :stepByStep, :recipeIngredients, :profileImg)"
    );
    $statement->execute(array(
    ":title"     => $array["title"],
    ":description"     => $array["description"],
    ":userID"    => $array["userID"],
    ":name"        => $array["name"],
    ":stepByStep"	   => $array["stepByStep"],
    ":recipeIngredients"        => $array["recipeIngredients"],
    ":profileImg"       => $array["profileImg"]
    ));
}

echo json_encode($array);
?>

Так что, если я удаляю MySQL-вставку, данные возвращаются во внешний интерфейс. Я застрял здесь некоторое время, сейчас ищу различные форумы для решения. В сообщении об ошибке говорится, что заголовок отсутствует, однако, как вы видите, он есть.

Любая помощь будет высоко ценится!

Ура!

Answer 1

CORS в Javascript и PHP работает как.

1. ОПЦИИ Запрос метода будет запущен со стороны браузера.
2. Серверная сторона (PHP) должна принять запрос OPTIONS , ответив 'OK' .

3. Теперь корректный POST-запрос будет запущен со стороны браузера, и он перейдет к вашей функциональной папке, где будет выполняться ваш PHP-код.

   if ($ _SERVER ["REQUEST_METHOD"] === "OPTIONS") { // место, где вы можете обработать ваш запрос и ответить нормально эхо «ОК»; }

Answer 2

Если вы не можете контролировать сторону сервера, вы можете работать как я на

Только на стороне клиента.

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

Только на стороне клиента, обходной путь

использовать dataType: 'jsonp',

   async function get_ajax_data(){

       var _reprojected_lat_lng = await $.ajax({

                                type: 'GET',

                                dataType: 'jsonp',

                                data: {},

                                url: _reprojection_url,

                                error: function (jqXHR, textStatus, errorThrown) {

                                    console.log(jqXHR)

                                },

                                success: function (data) {

                                    console.log(data);



                                    // note: data is already json type, you just specify dataType: jsonp

                                    return data;

                                }

                            });





 } // function               

Answer 3

Добрый день, это из-за того, что запросы Apache блокируют из разных источников, т.е. если ваш бэкэнд находится в http://yourdomain.com/client, а ваш конец шрифта в localhost: 3001 вызовет а потому что они имеют разное (принимающее) происхождение.

Решить:

Используйте файл .htaccess в вашей папке api / backend, например, в моем приложении мой index.php находится не в каталоге localhost / my-api / public, а в моем каталоге .htaccess в этом каталоге localhost / my-api / public

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Origin: "*" (allow access from any origin)
Header set Access-Control-Allow-Origin: "http://motech-ui.example" (allow access from only "http://motech-ui.example" origin)
Access-Control-Allow-Origin: "http://motech-ui.example | http://other.domain" (allow access from two mentioned origins)
</IfModule>

Или настроить в apache.conf

Access-Control-Allow-Origin: "*" (allow access from any origin)
Access-Control-Allow-Origin: "http://motech-ui.example" (allow access from only "http://motech-ui.example" origin)
Access-Control-Allow-Origin: "http://motech-ui.example | http://other.domain" (allow access from two mentioned origins)