Без какого-либо решения на стороне сервера, Theres - это только один способ, которым защищенная страница может получить что-то от небезопасной страницы / запроса, и это считается postMessage и всплывающее окно
Я сказал, что всплывающее окно, потому что сайт не может смешивать контент. Но всплывающее окно на самом деле не смешивается. У него есть собственное окно, но он все еще может общаться с открывателем с помощью postMessage.
Таким образом, вы можете открыть новую http-страницу с помощью window.open(...) и сделать это, сделав запрос за вас (то есть, если сайт также использует CORS)
XDomain пришел в голову, когда я написал это, но здесь есть современный подход, использующий новый fetch api , преимущество заключается в потоковой передаче больших файлов, недостатком является то, что он выиграл не работает во всех браузерах
Вы помещаете этот прокси-скрипт на любую http-страницу
onmessage = evt => {
const port = evt.ports[0]
fetch(...evt.data).then(res => {
// the response is not clonable
// so we make a new plain object
const obj = {
bodyUsed: false,
headers: [...res.headers],
ok: res.ok,
redirected: res.redurected,
status: res.status,
statusText: res.statusText,
type: res.type,
url: res.url
}
port.postMessage(obj)
// Pipe the request to the port (MessageChannel)
const reader = res.body.getReader()
const pump = () => reader.read()
.then(({value, done}) => done
? port.postMessage(done)
: (port.postMessage(value), pump())
)
// start the pipe
pump()
})
}
Затем вы открываете всплывающее окно на своей странице https (обратите внимание, что вы можете сделать это только для события взаимодействия с пользователем, иначе оно будет заблокировано)
window.popup = window.open(http://.../proxy.html)
создайте свою служебную функцию
function xfetch(...args) {
// tell the proxy to make the request
const ms = new MessageChannel
popup.postMessage(args, '*', [ms.port1])
// Resolves when the headers comes
return new Promise((rs, rj) => {
// First message will resolve the Response Object
ms.port2.onmessage = ({data}) => {
const stream = new ReadableStream({
start(controller) {
// Change the onmessage to pipe the remaning request
ms.port2.onmessage = evt => {
if (evt.data === true) // Done?
controller.close()
else // enqueue the buffer to the stream
controller.enqueue(evt.data)
}
}
})
// Construct a new response with the
// response headers and a stream
rs(new Response(stream, data))
}
})
}
И сделайте запрос, как вы обычно делаете с fetch api
xfetch('http://httpbin.org/get')
.then(res => res.text())
.then(console.log)