В настоящее время я работаю над двумя системами: одной, которую может использовать пользователь, и одним простым веб-сайтом. В моей основной системе пользователь может приобрести пакет и быть перенаправлен на страницу покупки на другом веб-сайте.
Итак, давайте уточним, у меня есть два приложения
- Приложение 1 (www.application1.com)
- Приложение 2 (www.application2.com)
Когда пользователь в Приложении 1 нажимает кнопку покупки, он или она перенаправляется на «www.application2.com/package/jidfhue282gw/purchase».
Я показываю все эти пакеты с кнопками, используя метод append в моем запросе AJAX (см. Ниже)
В приложении у меня есть форма с идентификатором purchase-form. Единственное, чего ему не хватает, это тегу @csrf, но я не могу добавить это в приложение, потому что если я это сделаю, мой код больше не будет работать. В результате возникает ошибка 419 Expired.
Как добавить токен @csrf в форму, чтобы он мог правильно отправлять?
Форма
'<form method="POST" action="https://rainierlaansite.test/package/' + el.token +'/purchase" id="purchase-form">' +
'<input type="hidden" value="'+ el.token +'" name="package_token">' +
'<input name="_token" value="' + csrfVar + '" type="hidden">' +
'<h4>' +
'<a href="#" id="download_package" class="badge badge-pill '+ (el.price == 0 ? 'badge-primary': 'badge-light') +'" onclick="document.getElementById(\'purchase-form\').submit();">' +
(el.price == 0 ? 'Download': '$ ' + el.price) +
'</a>' +
'</h4>' +
'<form>' +
Весь код
<meta name="csrf-token" content="@csrf">
$.ajax({
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'), 'X-Requested-With': 'XMLHttpRequest'},
url: 'https://www.rainierlaansite.test/api/packages/get',
type: 'GET',
data: {},
success: function(data) {
$('#package-loading').fadeOut();
let wrapper = $("#packages-wrapper");
let popup_list = $('.popup-list');
let popup = 'popup-id';
let csrfVar = $('meta[name="csrf-token"]').attr('content');
if(data == null) {
console.log('lol')
}
$.each(data, function(index, value) {
let el = data[index];
wrapper.append(
'<div class="row my-4" data-id='+ el.id +'>' +
'<div class="col-2 d-flex justify-content-center"><i class="fad fa-archive fa-2x"></i></div>' +
'<div class="col-6">' +
'<a href="#" class="popup" data-popup-id="'+ el.id +'"><h6 class="m-0">'+ el.name +'</h6></a>' +
'<p class="m-0 sub-text">'+ el.description +'</p>' +
'</div>' +
'<div class="col-4 d-flex justify-content-end align-items-center">' +
'<a href="#" id="download_package" class="badge badge-pill badge-light popup '+ (el.price == 0 ? 'badge-primary': 'badge-light') +'" style="font-size: 14px;" data-popup-id="'+ el.id +'">' + (el.price == 0 ? 'Download': '$ ' + el.price) +'</a>' +
'</div>' +
'</div>' + '<hr>'
);
popup_list.append(
'<div class="package-popup shadow popup-'+ el.id +'">' +
'<div class="package-popup-dialog animated zoomIn show faster">' +
'<div class="package-popup-content">' +
'<div class="row">' +
'<div class="col-2">' +
'<div class="row">' +
'<div class="col-12 d-flex justify-content-center">' +
'<i class="fad fa-archive fa-3x"></i>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="col-7">' +
'<div class="row">' +
'<div class="col-12">' +
'<h4 class="m-0">' + el.name + '</h4>' +
'<p class="sub-text">' + el.creator + '</p>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="col-3 text-center">' +
'<form method="POST" action="https://rainierlaansite.test/package/' + el.token +'/purchase" id="purchase-form">' +
'<input type="hidden" value="'+ el.token +'" name="package_token">' +
'<input name="_token" value="' + csrfVar + '" type="hidden">' +
'<h4>' +
'<a href="#" id="download_package" class="badge badge-pill '+ (el.price == 0 ? 'badge-primary': 'badge-light') +'" onclick="document.getElementById(\'purchase-form\').submit();">' +
(el.price == 0 ? 'Download': '$ ' + el.price) +
'</a>' +
'</h4>' +
'<form>' +
'</div>' +
'<div class="offset-2 col-7">' +
'<div class="rating">' +
'<span><i class="fas fa-star yellow"></i></span>' +
'<span><i class="fas fa-star yellow"></i></span>' +
'<span><i class="fas fa-star yellow"></i></span>' +
'<span><i class="fas fa-star yellow"></i></span>' +
'<span><i class="fas fa-star grey"></i></span>' +
'<small><a href="">· Uit 300 beoordelingen</a></small>' +
'</div>' +
'<small>Nog geen beoordelingen</small>' +
'</div>' +
'<div class="col-3 text-center">'+
'<i class="far fa-download"></i> ' + el.downloads +
'</div>' +
'</div>' +
'<div class="row my-5">' +
'<div class="col-12">' +
'<nav>' +
'<div class="nav nav-tabs" id="nav-tab" role="tablist">' +
'<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Details</a>' +
'<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Reviews</a>' +
'<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Version history</a>' +
'</div>' +
'</nav>' +
'<div class="tab-content" id="nav-tabContent">' +
'<div class="tab-pane fade show active py-4" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">' +
'<p>' + el.description + '</p>' +
'</div>' +
'<div class="tab-pane fade py-4" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">' +
'Dit is twee tekst' +
'</div>' +
'<div class="tab-pane fade py-4" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">' +
'Dit is tekst 3' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
);
});
$('.popup').on('click', function () {
if($(this).data(popup)) {
let item = $('.popup-' + $(this).data(popup));
item.addClass('show');
$(item).on('click', function(event) {
if (event.target.classList.contains("shadow")) {
item.removeClass('show');
}
})
}
});
},
error: function(e) {
$('#package-error').fadeIn().text("Unfortunately there was an error retrieving the packages");
}
});