Vue встраивает iframe, как iframe вызывает маршрутизацию в vue между доменами

Vue.js

За последние два дня я столкнулся с междоменной бизнес-логикой, как показано на следующем рисунке:

О перекрестном домене

пример URL иллюстрировать Разрешить ли общение
http://www.1.com/1.js
http://www.1.com/2.js
 такое же доменное имя разрешать
http://www.1.com/abc/1.js
http://www.1.com/def/2.js
 Разные папки под одним доменным именем разрешать
http://www.1.com:8000/1.js
http://www.1.com/2.js
 То же доменное имя, но разные порты не положено
https://www.1.com/1.js
http://www.1.com/2.js
 Разные протоколы для одного и того же доменного имени не положено
http://www.1.com/1.js
http://123.123.123.12/2.js
 То же доменное имя и соответствующий ip не положено
http://www.1.com/1.js
http://abc.1.com/2.js
 Основной домен тот же, поддомены разные не положено
http://www.1.com/1.js
http://abc.1.com/2.js
 То же доменное имя, другое доменное имя второго уровня не положено
http://www.1.com/1.js
http://www.2.com/1.js
 разные доменные имена не положено

проект

Доменное имя vue в проекте — a.com, а доменное имя iframe — b.com. Явно междоменный.

Существует множество междоменных решений, общих 1. jsonp

2.postMessage

3. Установите document.domain. Основной домен должен быть одинаковым, а поддомены должны быть разными.

4.window.name получает контент с помощью глобальных переменных window.parent.xx

5.location.hash pass связанные свойства

6. Серверный прокси-сервер

7. Сервер настраивает интерфейс CORS. CORS — это стандарт W3C. Полное название — «Совместное использование ресурсов между источниками». Это позволяет браузерам отправлять запросы XMLHttpRequest на того же происхождения ограничения.

Требованием проекта является переход на маршрутизацию, и основная бизнес-логика на стороне iframe завершает переход на маршрутизацию vue. Не включает запросы данных интерфейса,Пробовал 4 метода, 2 метода. Когда вызываются 4 метода, все еще сообщается об ошибке перекрестного происхождения.

Однако на том же сервере, называемом попыткой изменить конфигурацию сервера, разрешается фоновое

Access-Control-Allow-Origin: *

не удалось...

Для информации используйте posteMessage, поскольку проект упакован в H5, новый API можно использовать вне зависимости от совместимости.

Файл vue main.js в проекте определяет функцию

function receiveMessageFromIframePage (event) {
 console.log(event.data,event)
 if (event.data.data.includes('backHome')) {
   router.push({name: 'home'})
 } else if (event.data.data.includes('iframeNOlogin')) {
   router.push({name: 'login'})
 }
}


window.addEventListener("message", receiveMessageFromIframePage, false);

Событие привязано к logout.html кнопки выхода из iframe, которая должна быть привязана после готовности.

$(document).ready(function(){
    window.parent.postMessage({ data:"backHome" },'*');
})

Успех~ Уходи с работы вовремя

Категории