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

0

Поэтому я пытаюсь передать данные с моего интерфейса на мой back-end (однако, я не очень опытен в этой области). Однако данные поступают, если я попытаюсь вставить данные в 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-вставку, данные возвращаются к интерфейсу. Я застрял здесь некоторое время, теперь ищу различные форумы для решения. В сообщении об ошибке говорится, что заголовок отсутствует, однако он есть, как вы можете видеть.

Любая помощь приветствуется!

Ура!

  • 0
    developer.mozilla.org/en-US/docs/Web/HTTP/CORS
  • 0
    с помощью PHP developer.mozilla.org/en-US/docs/Web/HTTP/…
Показать ещё 2 комментария
Теги:
cors

3 ответа

1

Добрый день, это из-за запросов на блокировку Apache из разных источников, т.е. Если ваш бэкэнд находится по адресу http://yourdomain.com/client, а ваш конец шрифта находится на локальном хосте: 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>

Или config в 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)
Поделиться
  • 2
    это сработало. благодарю вас!
  • 0
    Сервер не блокирует запрос, это работа браузера (проверьте ответ в инструментах разработчика, и вы увидите его содержимое). Сервер предоставляет браузеру только разрешение на доступ к содержимому ответа (через Access-Control-Allow-Origin ), если источник запроса отличается.
0

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

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

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

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

использовать 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
Поделиться
0

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

  1. Запрос метода OPTIONS будет инициирован со стороны браузера.
  2. Сторона сервера (PHP) должна принять запрос OPTIONS, отвечая "ОК".

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

    if ($ _SERVER ["REQUEST_METHOD"] === "ОПЦИИ") {//место, где вы можете обрабатывать свой запрос и отвечать ok echo 'OK'; }

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню