实在不想再搞跨域的问题了

// HTML
;<iframe name="yinhang" src="www.yinhang.com"></iframe>
// JS
// 由于没有同源策略的限制，钓鱼网站可以直接拿到别的网站的Dom
const iframe = window.frames['yinhang']
const node = iframe.document.getElementById('你输入账号密码的Input')
console.log(`拿到了这个${node}，我还拿不到你刚刚输入的账号密码吗`)

// jsonp demo
router.get('/jsonp', function (req, res) {
  const result = {
    code: 0,
    message: 'jsonp success',
  }

  // cb是前端传来的query参数
  res.send(`${req.query.cb}(${JSON.stringify(result)})`)
})

<script type="text/javascript">
  window.jsonpCallback = function (res) {
    console.log('res', res)
  }
</script>
<script src="http://localhost:3001/jsonp?cb=jsonpCallback"></script>

function requestJSONP(url, data, jsonp = 'jsonpCallback') {
  return new Promise((resolve, reject) => {
    let arr = []

    Object.keys(data).forEach((key) => {
      arr.push(`${key}=${data[key]}`)
    })

    let query = arr.join('&')
    const script = document.createElement('script')

    window[jsonp] = function (response) {
      document.body.removeChild(script)
      delete window[jsonp]
      resolve(response)
    }

    script.src = `${url}?${query}&cb=${jsonp}`
    document.body.appendChild(script)
  })
}

// 业务代码中
requestJSONP(
  'http://localhost:3001/jsonp',
  {
    data: 'Hello World',
  },
  'testJSONP'
).then((response) => {
  console.log('JSONP', response)
})

function requestPOST(url, data, cb) {
  const iframe = document.createElement('iframe')

  iframe.name = 'iframePost'
  iframe.style.display = 'none'
  document.body.appendChild(iframe)

  const form = document.createElement('form')
  // input用来存放post提交的数据
  const input = document.createElement('input')

  iframe.addEventListener('load', function () {
    if (cb && typeof cb == 'function') {
      cb()
    }
  })

  form.action = url
  form.target = iframe.name
  form.method = 'post'

  Object.keys(data).forEach((key) => {
    input.name = key
    input.value = data[key].toString()
    form.appendChild(input.cloneNode())
  })

  form.style.display = 'none'
  document.body.appendChild(form)
  form.submit()

  document.body.removeChild(form)
}

// 业务场景调用
requestPOST(
  'http://localhost:3001/iframe_form',
  {
    data: 'Hello World',
  },
  function (response) {
    console.log('response', response)
  }
)

// 后端接口
// simple cors demo
router.get('/simple_cors', function (req, res) {
  const result = {
    code: 0,
    message: 'simple cors',
    data: req.query,
  }

  res.header('Access-Control-Allow-Origin', '*')
  res.send(result)
})

fetch('http://127.0.0.1:3001/simple_cors?is_simple=true').then((response) => {
  console.log('simple cors', response)
})

// 处理options请求
router.options('*', function (req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://127.0.0.1:8080')
  res.header('Access-Control-Allow-Credentials', true)
  res.header('Access-Control-Request-Method', 'PUT,POST,GET,DELETE,OPTIONS')
  res.header(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept, token'
  )

  next()
})

// 复杂跨域接口
router.post('/complex_cors', function (req, res) {
  const result = {
    code: 0,
    message: 'complex cors',
    data: req.query,
  }

  res.header('Access-Control-Allow-Origin', 'http://127.0.0.1:8080')
  res.header('Access-Control-Allow-Credentials', true)
  res.header('Access-Control-Request-Method', 'PUT,POST,GET,DELETE,OPTIONS')
  // 随便写了个cookie，浏览器里可能会报错，可以忽略，仅供演示
  res.cookie('a', 1)

  res.send(result)
})

fetch('http://127.0.0.1:3001/complex_cors?is_complex=true', {
  method: 'POST',
  credentials: 'include',
  headers: { token: 'extra headers' },
})
  .then((response) => {
    return response.json()
  })
  .catch((err) => {
    console.log('complex err', err)
  })
  .then((response) => {
    console.log(response)
  })

server {
  listen      80;
  server_name     www.myhost.com;
  location ^~ /api   {
      proxy_pass  http://127.0.0.1:3001;
  }
}

<template>
  <div id="app">
    <button type="button" @click.stop="getMessage">测试按钮</button>
    <iframe name="child" src="http://localhost:8081" width="800" height="600"></iframe>
  </div>
</template>

<script>
  export default {
    name: 'app',
    methods: {
      getMessage() {
        window.frames.child.postMessage('从parent发来的消息', 'http://localhost:8081')
      },
    },
    mounted() {
      window.addEventListener('message', (e) => {
        if (e.origin === 'http://localhost:8081') {
          console.log(e.data)
        }
      })
    },
  }
</script>

<template>
  <div id="app">我是子页面</div>
</template>

<script>
  export default {
    name: 'app',
    mounted() {
      window.addEventListener('message', (e) => {
        if (e.origin === 'http://localhost:8080') {
          console.log(e.data)
          e.source.postMessage('从child回复的消息', 'http://localhost:8080')
        }
      })
    },
  }
</script>