Опубликовать запрос к API заблокирован политикой CORS - PullRequest
Новая
       17

Опубликовать запрос к API заблокирован политикой CORS

0 голосов
/ 13 мая 2019

Я создаю веб-приложение с Vue.js, в этом веб-приложении люди должны войти в систему, чтобы получить ключ API.Я делаю пост-запрос к своему API с помощью axios, я также отправляю с ним 2 параметра, имя и пароль.Всякий раз, когда я отправляю свою форму, она постоянно выдает мне следующие ошибки: 

OPTIONS http://localhost/Leerjaar%203/api/apikey/ 500 (Internal Server Error)

и 

Access to XMLHttpRequest at 'http://localhost/Leerjaar%203/api/apikey/' from origin 'http://localhost:8082' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

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

Метод, который делает запрос поста: 

formSubmit(e) {
            e.preventDefault();
            let currentObj = this;
            axios.post('http://localhost/Leerjaar%203/api/apikey/', {
                docent: this.docentNaam,
                wachtwoord: this.wachtwoord
            })
            .then(function (response) {
                currentObj.output = response.data;
                console.log(response.data);
            })
            .catch(function (error) {

            }); 
        }

Мой PHP API: 

<?php    
session_start();
include "../errors.inc.php";
include "../credentials.inc.php";
include "../database.inc.php";

$docent = Docent();

if (!isset($_POST["wachtwoord"]))    fout(400, "wachtwoord ontbreekt");
if ($_POST["wachtwoord"] !== "test") fout(401, "wachtwoord incorrect");


header('Access-Control-Allow-Origin: http://http://localhost:8081/', false);     
header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
header('content-type: application/json; charset=utf-8');
echo '{"apikey":"'.md5(md5($docent)).'"}';

Моя форма: 

<form @submit="formSubmit">
                            <div class="form-group">
                                <label for="docentNaam">Naam:</label>
                                <input v-model="docentNaam" type="text" class="form-control" placeholder="Docenten afkorting">

                                <label for="wachtwoord">Wachtwoord</label>
                                <input v-model="wachtwoord" type="password" class="form-control" placeholder="Wachtwoord">

                                 <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </form>

Это заголовок, который я получаю:

Header

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

1 Ответ

1 голос
/ 13 мая 2019

CORS - это разделение ресурсов между источниками, см. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests.По сути, это обеспечивается вашим браузером.Если браузер блокирует запрос перекрестного источника, у вас есть несколько вариантов:

  • Не делать это запросом перекрестного источника (размещая все на одном хосте и в одном порту)

  • Удовлетворите критерии «простого запроса», поэтому браузер пропустит HTTP-запрос через

  • Внедрите серверную часть CORS для любого хостинга формы POST, которыйобычно это рутинная работа по настройке веб-сервера (т. е. в файле httpd.conf) или путем написания пользовательского обработчика запроса OPTIONS, который позволит совместно использовать ресурсы на странице, которая инициирует запрос POST.

В последних двух вариантах вы, вероятно, захотите подумать о том, как будет выглядеть «источник», как только ваша страница станет активной.Разрешение доступа к «*», вероятно, будет работать, но отменяет защиту межсайтовых сценариев, с которой вам помогает браузер.

...