前端知识顺理

1.事件冒泡是怎么样的？
事件冒泡就是，事件会从目前元素往根元素（从里到外）进行传递
2.跨域的方式？
由于浏览器同源策略，所以就有了跨域的问题，浏览器是从两个方面去做这个同源策略的，一是针对接口的请求，二是针对Dom的查询。

针对接口的请求的跨域方式
  • jsonp,利用script标签的src可跨域的特性（但只限制get方式）
  • 空iframe + from（支持post方式）
  • CORS （跨域资源共享）
    浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

  • 1.只要同时满足以下两大条件，就属于简单请求。
    （1) 请求方法是以下三种方法之一：
    HEAD
    GET
    POST
    （2）HTTP的头信息不超出以下几种字段：
    Accept
    Accept-Language
    Content-Language
    Last-Event-ID
    Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

  • 2.非简单请求
    非简单请求会发出一次预检测请求，返回码是204，预检测通过才会真正发出请求，这才返回200。这里通过前端发请求的时候增加一个额外的headers来触发非简单请求。

  • 代理（nginx配置）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    server{
        # 监听9099端口
        listen 9099;
        # 域名是localhost
        server_name localhost;
        #凡是localhost:9099/api这个样子的，都转发到真正的服务端地址http://localhost:9871 
        location ^~ /api {
            proxy_pass http://localhost:9871;
        }    
    }
针对dom查询的跨域方式
  • postMessage： window.postMessage() 是HTML5的一个接口，专注实现不同窗口不同页面的跨域通讯。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <template>
      <div>
        <button @click="postMessage">给http://crossDomain.com:9099发消息</button>
        <iframe name="crossDomainIframe" src="http://crossdomain.com:9099"></iframe>
      </div>
    </template>

    <script>
    export default {
      mounted () {
        window.addEventListener('message', (e) => {
          // 这里一定要对来源做校验
          if (e.origin === 'http://crossdomain.com:9099') {
            // 来自http://crossdomain.com:9099的结果回复
            console.log(e.data)
          }
        })
      },
      methods: {
        // 向http://crossdomain.com:9099发消息
        postMessage () {
          const iframe = window.frames['crossDomainIframe']
          iframe.postMessage('我是[http://localhost:9099], 麻烦你查一下你那边有没有id为app的Dom', 'http://crossdomain.com:9099')
        }
      }
    }
    </script>