你所不知道的前端网络之跨域请求

Jason199
110 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第20天，点击查看活动详情

什么是跨域

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

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

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

\

解决跨域问题：

代理，常用

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

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

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

           依旧是直接使用 $.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('有一个请求要发送出去了')  
})
  1. ajaxSuccess()

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

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

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

        每一个请求失败之后触发

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

        根据 jQuery 判定的失败

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

5. ajaxComplete()

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

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

// 5. ajaxComplete 
$(window).ajaxComplete(function () {  
console.log('=============== 有一个请求完成了 =================')   
})
  1. 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($$)
avatar
文章
阅读
粉丝