跨域解决方案详解-优快云博客

本文链接：https://blog.youkuaiyun.com/zdhanunity/article/details/95017706

跨域

如果两个页面的协议，端口（如果有指定）和主机都相同，则两个页面具有相同的源。

如果通不符合同源策略, 即为跨域, 即域名/协议/端口, 有一个及以上不同.

解决方法

jsonp
在HTML标签里，一些标签比如script、img这样的获取资源的标签是没有跨域限制的, jsonp利用了这一点
1. 在前端定义一个回调函数如, jsonpCb
2. 服务端返回时, 直接返回 jsonpCb(data)相当于执行我们在前端定义的 jsonpCb函数, 并把数据通过data方式传入
  缺点: jsonp只能发GET请求，因为本质上script加载资源就是GET

    <script type='text/javascript'>
      // 后端返回jsonpCb(data)，相当于执行这个方法，res拿到的就是data数据。
      window.jsonpCb = function (res) {
        console.log(res)
      }
    </script>
    <script src='http://xxxx/jsonpCb'></script>

封装:

const jsonpRequest = ({url, data}) => {
  return new Promise((resolve, reject) => {
    // 创建script标签
    const script = document.createElement('script')
    // 接口返回的数据获取
    window.jsonpCb = (res) => {
      document.body.removeChild(script)
      delete window.jsonpCb
      resolve(res)
    }
    script.src = `${url}?${data}&cb=jsonpCb`
    document.body.appendChild(script)
  })
}

iframe
如果要发POST请求怎么办呢? 可以用iframe, 原理是, form的target属性, 如果为一个iframe的name, 可以让表单提交在该iframe执行

const frameRequest = ({url, data}) => {
  // 创建一个用来发送数据的iframe.
  const iframe = document.createElement('iframe')
  iframe.name = 'iframePost'
  iframe.style.display = 'none'
  document.body.appendChild(iframe)
  
  // 创建form
  const form = document.createElement('form')
  const node = document.createElement('input')	
  form.action = url
  // 在指定的iframe中执行form
  form.target = iframe.name
  form.method = 'post'
  for (let name in data) {
    node.name = name
    node.value = data[name].toString()
    form.appendChild(node.cloneNode())
  }
  // 表单元素需要添加到主文档中.
  form.style.display = 'none'
  document.body.appendChild(form)
  form.submit()

  // 表单提交后,就可以删除这个表单,不影响下次的数据发送.
  document.body.removeChild(form)
}

如果要在父页面获取iframe里面的内容可以这样做

如: 父级: localhost:9000,  iframe:  localhost:9001
- 在localhost:9000页面使用js代码动态增加一个iframe
- 该iframe的src指向与 localhost:9001同级目录下的一个页面xx.html
- 然后先去9001创建好这个页面xx.html。
- 在localhost:9001/xx.html中，去做想做的js操作（如调用localhost:9001中的一个js函数，或者改变背景色等都在这个页面进行）