У меня есть внешний интерфейс, работающий на самом последнем vue на порту 5000. Затем у меня есть мой бэкэнд, работающий на самом последнем люмене на порту 8080. Оба находятся на моей локальной машине. Позже они будут разделены на две виртуальные машины.
Прямо сейчас, отправляя http-запрос от внешнего интерфейса к внутреннему, я получаю следующую ошибку в моей devConsole (НЕ vue devtools, но обычная консоль firefox / chrome devtools!):
Error: Request failed with status code 401
Функция, возвращающая объект ax ios, выполняющий http-запрос, выглядит так:
function fetchData(method, slug, payload) {
return axios[method](`${API_ENDPOINT}${slug}`, payload);
}
Вызов выглядит так:
fetchData(METHOD_POST, USER_LIST, "someToken").then((res)=>{
return res
})
METHOD_POST содержит строку post, а USER_LIST содержит строку /user/show_data, которая используется для дальнейшего указания URL-адреса. В моем бэкэнде Lumen он обращается к следующему маршруту:
$router->group(['prefix' => 'user', 'middleware' => 'auth'], function() use ($router){
$router->post('/show_data', 'UserController@getData');
});
Маршрут и соответствующий контроллер работают, я протестировал его с RESTClient https://addons.mozilla.org/de/firefox/addon/restclient/
Я думаю, что синтаксически все хорошо. Кроме того, токен не истек, когда я использовал его, я проверял это несколько раз. Поэтому я думаю, что это может быть связано с CORS-политикой apache и / или php. Я использую apache и php из последнего дистрибутива XAMPP.
Тем не менее, я не совсем уверен, так ли это, тем более, что это первый раз, когда я подключаю бэкэнд, используя люмен и внешний интерфейс используя vue. js.
РЕДАКТИРОВАТЬ: мне удалось активировать «withCredentials» для моего объекта ax ios, изменив тело функции на:
axios.defaults.headers.withCredentials = true;
return axios[method](`${API_ENDPOINT}${slug}`, payload);
Однако теперь проблема CORS поднимается ^^ При отправке При запросе http я получаю следующие сообщения об ошибках на своей консоли:
Access to XMLHttpRequest at 'http://localhost:8080/user/show_data' from origin 'http://localhost:5000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
И
xhr.js:178 POST http://localhost:8080/user/show_data net::ERR_FAILED
И
createError.js:16 Uncaught (in promise) Error: Network Error
at t.exports (createError.js:16)
at XMLHttpRequest.d.onerror (xhr.js:83)
Что мне делать?
EDIT2: теперь я добавил следующие строки в мой httpd.conf и перезапустил apache и lumenproject:
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Max-Age: 360
Header set Access-Control-Allow-Credentials: true
Header set Access-Control-Allow-Methods: *
Header set Access-Control-Allow-Headers: Origin
Header set Access-Control-Expose-Headers: Access-Control-Allow-Origin
</IfModule>
Я также попытался явно указать источник
http://localhost:8080
и
http://localhost:5000
Но это не помогло. Сообщение об ошибке остается прежним.