Как организовать безопасные запросы Vue-Laravel?

Question

[mazahaler]

Здравствуйте, только изучаю Vue и решил для начала сделать систему аутентификации(регистрация, логин и т.д.).
Запросы отправляются от Vue к Laravel, и мне пришлось прописать в Laravel routes/api.php перед роутами такие штуки:
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE');
header('Access-Control-Allow-Headers: Content-Type, X-Auth-Token, Origin, Authorization');
header('Access-Control-Expose-Headers: Authorization');
по той причине, что когда я отправлял запросы выскакивала ошибка, связанная с CORS. Нагуглил, что надо вставить эти строчки, но не разобрался в в вопросе безопасности.
Вопрос: безопасно ли использовать строки, приведенные выше? Если нет, то что посоветуете, чтобы не вылазило ошибок, связанных с CORS

Answer 1

[JhaoDa]

Невозможно сказать, «безопасно ли использовать строки, приведенные выше», потому что это твоё приложение и твоя логика.
Но как минимум Access-Control-Allow-Origin: * сводит на нет вообще весь смысл CORS.

Comments

[mazahaler]

Вот кусочек из routes/api.php:

//header('Access-Control-Allow-Origin:  *');
header('Access-Control-Allow-Methods:  POST, GET, OPTIONS, PUT, DELETE');
header('Access-Control-Allow-Headers:  Content-Type, X-Auth-Token, Origin, Authorization');
header('Access-Control-Expose-Headers: Authorization');

Route::prefix('auth')->group(function () {
    Route::post('register', 'AuthController@register');
    Route::post('login', 'AuthController@login');
    Route::get('refresh', 'AuthController@refresh');
    Route::group(['middleware' => 'auth:api'], function(){
        Route::get('user', 'AuthController@user');
        Route::post('logout', 'AuthController@logout');
    });
});

Как видно, я закомментил Access-Control-Allow-Origin: *
После этого во Front части приложения(Vue) в консоли получаю это:
Access to XMLHttpRequest at '127.0.0.1:8000/api/auth/refresh' from origin 'localhost:8080' 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.
Как избавиться от этого и оставить "весь смысл CORS"?

[JhaoDa]

mazahaler, окей, я уточню: * сводит на нет вообще весь смысл CORS.

[mazahaler]

JhaoDa, значит надо прописать просто адрес сервера, откуда идут запросы?
header('Access-Control-Allow-Origin: localhost:8080');
типа так?

[JhaoDa]

mazahaler, ещё и схему указывать надо.

[mazahaler]

JhaoDa, Окей, спасибо большое. А что касается остальных трех строчек? Они сами по себе не открывают какую-либо уязвимость/уязвимости?

[JhaoDa]

mazahaler,

Они сами по себе не открывают какую-либо уязвимость/уязвимости?

CORS сам по себе ничего не делает, это просто указание браузеру «у меня вот такие ограничения, если ты их понимаешь... а если не понимаешь, то и не надо».

[Сергей delphinpro]

Для локальной разработки (на локалхосте) нужно в вебпаке настроить проксю :8080 => :8000.

[Сергей delphinpro]

devServer: {
        proxy: {
            '^/api': {
                target      : 'http://127.0.0.1:8000',
            },
        },
    },