Axios与跨域

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第10天，点击查看活动详情

• 目前应用最广泛的Ajax封装库
• 官网：axios-js.com
• 地址：unpkg.com/axios/dist/…
• Axios API
  • 可以通过向axios（）传递相关配置来创建请求
  • axios（config） config为对象格式的配置选项
  • axios（url，config） config可选，不写config时，默认是get方法
  • 常用配置项
  • 全局配置默认值
    • 可以指定将被用在各个请求的配置默认值
  • 拦截器
    • 在请求或响应被then或catch处理前拦截它们
  • 快速请求方法
    • axios.get（url[，config]）
    • axios.post(url[, config])
    • axios.delet(url[, config])
    • axios.put(url[, config])
• HTML5中对XMLHTTPRequest类型全面升级，更易用，更强大
• onload / onprogress
  • xhr.onload事件：只在请求完成时触发（readyState为4）
  • xhr.onprogress事件：只在请求进行中触发
• XMLHTTPRequest 2.0
  • 以对象的形式表述响应体，其类型取决于responseType的值。你可以尝试设置responseType的值，以便通过特定的类型请求数据
  • responseType要在调用open()初始化请求之后，在调用send()发送请求到服务器之前设置方可生效
• 同源策略
  • 同源策略是浏览器的一种安全策略，所谓同源是指域名、协议、端口完全相同
  • 在同源策略下，只有同源的地址才可以相互通过Ajax的方式请求
  • 同源或者不同源说的是两个地址之间的关系，不同源地址之间请求我们称之为跨域请求
  • www.example.com/detail.html…
• 在同源策略下，浏览器不允许Ajax跨域获取服务器数据。现代化的web应用中肯定会有不同源的现象
• 解决跨域：JSONP原理
  • JSON with padding是一种借助于script标签发送跨域请求的技巧
  • 原理就是在客户端借助script标签请求服务端的一个地址
  • 地址返回一段带有某个全局函数调用的JavaScript脚本
  • 在调用函数中，原本需要返回给客户端的数据通过参数传递给这个函数
  • 这样客户端的函数中就可以通过参数得到原本服务端想要返回的数据
  • 服务端
  • 客户端
• JSONP只能发送GET请求
• JSONP用的是script标签，与Ajax提供的XMLHTTPRequest没有任何关系
• 解决跨域：cors
  • Cross Origin Resource Share，跨域资源共享
  • 无需在客户端做出任何变化（客户端不用改代码），只是在被请求的服务端响应的时候添加一个Access-Control-Allow-Origin的响应头，表示这个资源是否允许指定域请求
  • Access-Control-Allow-Origin的值：
    •   ：表示允许任意源访问，不安全
    • foo.com ：允许指定的源访问
  • 服务端演示