同源策略和如何解决跨域

同源策略和跨域

1. 同源策略：当发起一个http请求的时候，我们当前的网址和被请求的网址-协议，域名，端口必须一致，如果有一个不同就产生了非同源策略，也叫跨域。

2. 同源策略的目的为了保护站带你资源的安全性。

3. 同源策略只有浏览器有，其他软件，系统没有。

如何解决跨域

1. jsonp

• 原理：创建一个script标签，使用src属性请求，因为script不受同源策略的影响，所以可以实现跨域

• 其他的

  1. img

  2. link、

  3. iframe

1. 借助后端语言完成请求代理

• java

• php

• nodejs

1. vue项目中使用vue.config.js里面配置跨域

• vue.config.js 是vue脚手架的配置文件

• vue@cli 创建vue项目

• vue脚手架底层是基于webpack封装的

• webpack不是给浏览器用的，必须使用node.js来使用

• node.js是把浏览器的内核抽离了出来，安装到电脑的全局环境中，让任何位置都可以允许js文件.nodejs是后端语言。

• 代理请求的过程：vue.config.js=>nodejs[后端程序代理请求]

1. cors跨域

• 后端做了请求的白名单处理*

• 只要前端的浏览器支持cors跨域就可以

封装自己的ajax

1. 创建一个请求对象 var ajax =new XMLHttpRequest()

2. 连接 ajax.open(method,url,sync)

3. 发送请求：如果是post参数写在send里，如果是get参数拼接在url后面

   if(method==='post'){
      ajax.send(JSON.styingify(data))
  }else{
      ajax.send()
  }
​

 4. 监听响应
 ajax.onreadystatechange = function () {
          if (ajax.status === 200 && ajax.readyState === 4) {
            ajax.responseType = 'json' // 让ajax使用json方式格式化返回值
            resolve(ajax.response)
          }
        }
 5. 容错
  if (method === 'post') {
          ajax.setRequestHeader('content-type', 'application/json; charset=utf-8')
        }
​
        // 容错
        ajax.onerror = function () {
          reject(new Error('请求失败!'))
        }
      })
    }

axios

• 目前是最火的前端请求库-工具,它是基于ajax和promise封装的,它强大的地方在于可以运行在浏览器端,也可以运行在nodejs端.

• 安装使用和封装

• 安装:npm i axios

截流和防抖

• 目的：性能优化

• 实现：闭包

截流

固定的时间内必须执行一次

一个程序事件在持续的触发中,我们使用截流保证在固定的时间段内执行一次

场景：搜索提示

防抖

永远保持执行最后一次

事件如果持续触发,防抖就一直等待,等到事件触发完毕后,才会执行最后一次

场景：滚动加载