前端网络之跨域请求

什么是跨域

出于浏览器的同源策略限制。同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。

源=协议+主机+端口源=协议+主机+端口，

两个源相同，称之为同源，两个源不同，称之为跨源或跨域

解决跨域问题：

代理，常用

由一个同源的代理服务端转发请求

          对于前端来说, 依旧是正常发送请求

          只不过把地址书写成代理地址

           依旧是直接使用 $.ajax() 方法来发送

           只不过 url 位置书写 代理标识符

 // 发送一个代理请求    $.ajax({      url: '/jason',      success (res) {        console.log(res)      }    })

JSONP，常用

  前端利用 script 标签和 src 属性绕开同源策略

          和 ajax 没有关系, 实际上不是在发送 ajax 请求

          实际上是在请求一个 js 文件

 jQuery 发送 jsonp 请求

        $.ajax() 方法

        jQuery 封装 ajax 函数的时候做了一个判断

      根据你 dataType 传递的值来判断

      只要把 dataType 书写成 'jsonp'

          就会发送 jsonp 请求

      注意: 发送 jsonp 请求会默认不缓存(自动添加一个 _=时间戳)

$.ajax({   url: 'http://jason.com/index',   type: 'get',   data: {},   xhrFields: {       withCredentials: true    // 前端设置是否带cookie   },   crossDomain: true,   // 会让请求头中包含跨域的额外信息，但不会含cookie});

【JSONP 的优缺点】

优点：兼容性好（兼容低版本 IE）

缺点：1.JSONP 只支持 GET 请求；

2.XMLHttpRequest 相对于 JSONP 有着更好的错误处理机制

CORS

CORS 是 W3C 推荐的一种新的官方方案，能使服务器支持 XMLHttpRequest 的跨域请求。CORS 实现起来非常方便，只需要增加一些 HTTP 头，让服务器能声明允许的访问来源。

服务端允许指定客户端发送请求

         与前端没有关系

         前端使用 $.ajax()正常发送请求

简单请求的判定

请求方法属于下面的一种：

• get

• post

• head

请求头仅包含安全的字段，常见的安全字段如下：

• Accept
  

• Accept-Language
  

• Content-Language
  

• Content-Type
  

• DPR
  

• Downlink
  

• Save-Data
  

• Viewport-Width
  

• Width
  

请求头如果包含Content-Type，仅限下面的值之一：

• text/plain
  

• multipart/form-data
  

• application/x-www-form-urlencoded
  

 jQuery 的全局钩子函数

        叫做全局 ajax 函数，在 ajax 的不同阶段

        一个 ajax 的整个周期中, 会在不同的位置执行的函数

        我们管这种再一个事情的生命周期上各个不同时期触发的函数叫做 钩子函数

          不是自主触发的函数, 而是钩挂再其他的事情上

        由其他的事情发生过程中来触发

1. ajaxStart()

        表再同一个作用域下多个 ajax 请求的时候

        第一个 ajax 请求之前  

 // 1. ajaxStart()    $(window).ajaxStart(function () {      console.log('第一个请求开始')    })

2. ajaxSend()

        在每一个请求发送之前触发

        只要有一个请求要执行 send 方法了, 就会先出发钩子函数

// 2. ajaxSend()$(window).ajaxSend(function () {      console.log('有一个请求要发送出去了')    })

3. ajaxSuccess()

        在每一个请求成功之后触发

        只要有一个请求成功了, 就会触发一次

// 3. ajaxSuccess()    $(window).ajaxSuccess(function () {      console.log('有一个请求成功了')    })

4. ajaxError()

        每一个请求失败之后触发

        只要有一个请求失败了, 就会触发一次

        根据 jQuery 判定的失败

// 4. ajaxError()    $(window).ajaxError(function () {      console.log('有一个请求失败了')    })

5. ajaxComplete()

       在每一个请求完成之后触发

      只要有一个请求完成了, 不管成功还是失败, 只要完成了就会触发

// 5. ajaxComplete    $(window).ajaxComplete(function () {      console.log('=============== 有一个请求完成了 =================')    })

6. ajaxStop()

        在同一个作用域下最后一个 ajax 结束以后触发

        当你有多个请求的时候, 会在最后一个结束以后触发这个钩子

// 6. ajaxStop()    $(window).ajaxStop(function () {      console.log('最后一个请求结束了')    })

jQuery 的多库并存

        jquery 自己是一个库

        还有很多其他的 库

        当还有很多其他的 库与 jquery 一起使用的时候

        如果两个库都向外暴露了 $ 或者 jQuery 的变量名

      会出现变量名冲突

        两个库只写在后面的一个库能正常使用

        jQuery 给我们提供了一个多库并存的机制

使用方法：

        1. 要求你把 jQuery 引入再最后面

          先暂时把变量民的所有权交给 jQuery

        2. 执行一个方法, jQuery 把变量名的所有权交出去

          表示我不再占用这个名字了

          2-1. noConflict()

            交出 $ 的控制权

          2-2. noConflict(true)

交出 $ 和 jQuery 的控制权

          2-3. const 变量 = $.noConflict(true)

你的变量是什么

            自己定义一个控制权

// 自主定义一个控制权 const $$=$.noConflict(true)

// 自主定义一个控制权    const $$ = $.noConflict(true)        console.log($, jQuery)    console.log($$)