Блог

У меня есть iframe внутри модального.

 const ThreeDSecure = ({
    paymentRequest,
    md,
    termUrl,
    issuerUrl,
    source,
    promotions,
    products,
    userProfile
}) => {
    const dispatch = useDispatch();
    const formId = `${source}-form`;
    window.addEventListener(
        'message',
        function(event) {
           ...
        },
        false
    );
    
    const submitForm = () => {
        setTimeout(() => {
            if (document.forms[formId]) {
                document.forms[formId].submit();
            }
        }, 100);
    };
    
    return (
        <ThreeDSecureModal
            renderBodyContent={() => (
                <iframe
                    height="500"
                    width="100%"
                    name="threeDSiFrame"
                    title="threeDSiFrame"
                    frameBorder="0"
                    onLoad={submitForm()}
                >
                    <form
                        action={issuerUrl}
                        id={formId}
                        method="POST"
                        target="threeDSiFrame"
                    >
                        <input
                            type="hidden"
                            name="loadReq"
                            value={loadReq}
                        />
    
                    </form>
                </iframe>
            )}
        />
    );
 

Iframe отображает вызов банков:

Затем пользователь вводит пароль и нажимает кнопку отправки.

В то время как банк перенаправляет на другой серверный сервер, который затем вызовет наш интерфейс, iframe просто остается пустым, пока этот серверный api не вернется, сообщив, что пользователь авторизован.

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

Я попытался заменить:

 document.forms[formId].submit() 
 

со следующим кодом в моем submitForm() :

 fetch(issuerUrl, {
        method: 'POST',
        body: new FormData(document.forms[formId]),
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    })
    .then(res => res.text())
 

Но он выдает ошибку CORS:

 Access to fetch at 'https://checkoutshopper-test.adyen.com/checkoutshopper/threeDS2.shtml' from origin 'https://checkout.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
 

Есть ли способ обойти это, потому что банк не собирается вносить нас в белый список.