XMLHttpRequest заблокирован политикой CORS на axios.post - PullRequest
Новая
       40

XMLHttpRequest заблокирован политикой CORS на axios.post

0 голосов
/ 28 апреля 2019

axios.post (код ниже) должен отправить данные на URL api/add-todo, но я получаю следующие ошибки:

enter image description here

  axios.post('http://localhost/vueoctober/todo/api/add-todo', todo).then(function (response) {
    console.log(response);
  }).catch(function(error) {
    console.log(error);
  });

Маршрут api/add-todo обрабатывается октябрьским методом Route::get() (https://octobercms.com/docs/services/router). Почему он не найден?

Если я изменю axios.post на axios.get, это будет работать! Но мне нужны данные поста, а не получить.

Что я пробовал:

1) Я пытался добавить эти заголовки в .htaccess: 

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTION"

Работает только для axios.get. axios.post все еще блокирует.

2) Я добавил Header set Access-Control-Allow-Origin "*" в httpd.conf.

Приложение Vue работает на порте 8080, поэтому URL-адрес axios.post не может быть относительно .

Ответы [ 3 ]

0 голосов
/ 28 апреля 2019

Часов Google и я получил ответ ...

1) Установите плагин Cross-Origin Resource Sharing (CORS).

2) В htaccess приложения Vue добавьте: 

Header set Access-Control-Allow-Origin '*'
Header set Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header set Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTION"

ВНИМАНИЕ!Напишите SET не ДОБАВЛЯТЬ!

Вот и все.

0 голосов
/ 30 апреля 2019

Так что для разъяснения по этому вопросу. Всегда есть много способов ответить на проблему. Вот что я сделал для себя. Отметьте это для предполетного запроса . Предварительный запрос создается браузером и не предназначен для безопасности. Эта функция, которую я создал вначале, выдаст нормальное сообщение по запросу, затем, если данные содержат какие-либо данные, они будут делать то, что они называются (здесь вы проверяете безопасность). Мне не нужно связываться с файлами .htaccess. Хотя я установил плагин CORS, потому что это хороший плагин. Также видео с watch-learn делает автор, делающий перекрестный запрос, в котором он рассказывает, как исправить проблему. Я думаю, что он только что снял видео, прежде чем предварительные запросы стали нормой браузера. Найдена информация о маршрутизации здесь . 

Route::match(['POST', 'OPTIONS'],'api/update-todo', function(Request $req) {
$data = $req->input();
if (!empty($data)) {
    Todo::where('id', $data['id'])
        ->update([
        'name' => $data['name'],
        'description' => $data['description'],
        'status' => $data['status'] 
    ]);
    return response()->json([
        'Success' => $data,
    ]);
} else {
    return response()->json([
      'Success' => $req,
    ]);
}
});
0 голосов
/ 28 апреля 2019

Внимательно посмотрите на сообщение об ошибке, оно говорит, что ответ на предварительный запрос не имеет статуса HTTP ok.

Очевидно, ваш код на стороне сервера не имеетобработчик маршрута для запроса OPTIONS, поэтому вам нужно добавить его.

В качестве отступления, после того, как браузер получит успешный ответ OPTIONS, он сделает запрос POST, но вы сказали:

Маршрут api / add-todo обрабатывается октябрьским методом Route :: get ()

Вам понадобится Route::post(), чтобы справиться с этим.

...