纯JS实现跨域发送请求
function fetch(opts) {
const ifm = document.createElement('iframe')
const script = document.createElement('script')
const js = `
document.domain = window.top.location.hostname
window.onmessage = async (e) => {
const w = window.parent
const data = e.data
const res = await fetch(data)
w.postMessage({type: 'fetch', data: res})
}
function fetch(opts) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest()
xhr.open(opts.method, opts.url)
xhr.onload = e => {
try {
resolve({
success: true,
result: JSON.parse(xhr.responseText)
})
} catch(e) {
reject({
success: false,
result: xhr.responseText
})
}
}
xhr.onerror = e => reject(e)
let data = null
try {
data = opts.data && JSON.stringify(opts.data) || null
} catch(e) {}
xhr.send(data)
})
}
`
script.innerHTML = js
document.body.appendChild(ifm)
ifm.style.display = 'none'
const w = ifm.contentWindow
w.document.body.appendChild(script)
w.postMessage(opts)
return new Promise((resolve, reject) => {
window.onmessage = e => resolve(e.data)
})
}
示例:
const res = await request({url: 'http://164.red:8002', method: 'get'})
文章仅代表个人观点,如有任何疑问或疏漏之处,欢迎随时评论留言。