Ajax-запрос Laravel, заголовок «Access-Control-Allow-Origin» отсутствует

Question

Сегодня я расширил свой рабочий процесс с Heroku, и когда я все установил и запустил и начал тестировать такие вещи, как регистрация / модальный вход в систему, я получил эту ошибку на своей консоли.

Доступ к XMLHttpRequest по адресу http://app -name.herokuapp.com / register 'from origin' https://app -name.herokuapp.com 'заблокировано политикой CORS: Ответ на предпечатный запрос не прошелпроверка контроля доступа: в запрашиваемом ресурсе отсутствует заголовок «Access-Control-Allow-Origin».

Попытка добавления Content-Security-Policy к моему заголовку в файле макета, а также добавление X-CSRF-TOKEN вМой заголовок запроса ajax удалил некоторую часть ошибки, но затем просто погуглил разные решения и попробовал их.

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

 $(document).on('submit', '#formRegister', function(e) {
            e.preventDefault();

            $('input+small').text('');
            $('#formRegister input').removeClass('is-invalid');

            $.ajax({
                method: $(this).attr('method'),
                url: $(this).attr('action'),
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Access-Control-Allow-Methods' : 'POST',
                    'Access-Control-Allow-Headers' : 'X-Requested-With, Content-Type, X-Auth-Token, Origin, Authorization'
                },
                data: $(this).serialize(),
                dataType: "json",
                crossDomain: false
            })
                .done(function(data) {
                    $('.success-registered').removeClass('d-none');
                    $('#formRegister input').val('');
                    setTimeout(function() {
                        $('.success-registered').addClass('d-none');
                        location.reload();
                    }, 3000);
                    $('#login').modal('hide');
                })
                .fail(function(data) {
                    if (data.status === 422 && data.responseJSON) {
                        if (Object.keys(data.responseJSON.errors).length) {
                            for (field in data.responseJSON.errors) {
                                var error = data.responseJSON.errors[field];
                                var input = '#formRegister input[name=' + field + ']';
                                $(input).addClass('is-invalid');
                                $(input).next('span').find('strong').text(error[0]);
                            }
                        }
                    }
                });
        });

public function register(Request $request)
    {
        $this->validator($request->all())->validate();

        event(new Registered($user = $this->create($request->all())));

        $this->guard()->login($user);

        return $this->registered($request, $user)
            ?: response()->json();
    }

 protected function sendLoginResponse(Request $request)
    {
        $request->session()->regenerate();

        $this->clearLoginAttempts($request);

        return $this->authenticated($request, $this->guard()->user())
            ?: response()->json();
    }

Я исключаю вывод JSON для проверки и перезагрузки страницыпри успешном запросе от контроллера.

Answer 1

У ваших сайтов разные протоколы. Один использует http, а другой https. Согласно MDN :

Веб-приложение выполняет HTTP-запрос с несколькими источниками, когда оно запрашивает ресурс, источник которого (домен, протокол и порт) отличается от своего собственного источника.

- Обмен ресурсами между источниками

Чтобы исправить это, используйте один и тот же протокол для обоих сайтов.

Answer 2

В заголовке:

<meta name="csrf-token" content="{{ csrf_token() }}" />

Добавить поле csrf в форме

<form action="your action" method="post">
  @csrf

  <!-- your other fields -->
</form>

В коде js:

$(document).on('submit', '#formRegister', function(e) {
            e.preventDefault();

            $('input+small').text('');
            $('#formRegister input').removeClass('is-invalid');

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                method: $(this).attr('method'),
                url: $(this).attr('action'),                
                data: $(this).serialize(),
                dataType: "json",
                cache: false,
                crossDomain: false
            })
                .done(function(data) {
                    $('.success-registered').removeClass('d-none');
                    $('#formRegister input').val('');
                    setTimeout(function() {
                        $('.success-registered').addClass('d-none');
                        location.reload();
                    }, 3000);
                    $('#login').modal('hide');
                })
                .fail(function(data) {
                    if (data.status === 422 && data.responseJSON) {
                        if (Object.keys(data.responseJSON.errors).length) {
                            for (field in data.responseJSON.errors) {
                                var error = data.responseJSON.errors[field];
                                var input = '#formRegister input[name=' + field + ']';
                                $(input).addClass('is-invalid');
                                $(input).next('span').find('strong').text(error[0]);
                            }
                        }
                    }
                });
        });