26：跨域

一、同源策略

同源策略是浏览器用来约束数据请求的安全机制。同源策略要求：发起请求方和被请求方必须同协议、同域名、同端口，只要有一个不同，且被请求方没有设置CORS策略，那么本次请求会被认为跨域。
- 协议：http 和 https
- 域名：www.baidu.com 和 baike.baidu.com
- 端口：:3000 和 :3001

二、跨域

凡是没有遵守同源策略的XMLHttpRequest请求，都会被浏览器阻止，报错

跨域的意义：
- 互联网的存在，必须要依赖跨域，因为只有各个域之间的数据互通了，才能形成网络，才可以在不同的节点之间进行跳转…
跨域的解决方案：
- CORS：遵守同源策略：在要请求的后端程序上设置访问控制允许源的头部信息
  - 纯后端
  - 简单，方便，不安全
- jsonp：不使用XMLHttpRequest发起请求，利用html标签可以跨域获取数据的特性，使用script标签发起请求，利用了script标签会将引入的文本资源作为js代码执行的特性，获取后端数据
  - 发起请求端和被请求端配合
  - 方便，安全，比较复杂
- 服务器代理：使用服务端发起跨域请求，不使用浏览器
  - 搭建代理服务器，由代理服务器发起向另一个跨域服务器的请求，请求到数据后，响应给自己的客户端，客户端从代理服务器上获取到跨域服务器的数据
  - 技术要求：至少要掌握一门后端语言的使用
  - 发起请求方解决，无需得到被请求方的支持
  - 方便，安全，特别复杂
解决代码（了解）
- 服务器代理：
  - 搭建自己的服务器
  - 客户端请求自己的服务器
  - 自己的服务器请求跨域的服务器
  - 自己的服务器接收到跨域的服务器的响应
  - 自己的服务器将接收到的响应再响应给自己的客户端
  - 技术要求：
    - 掌握一门后端语言：Node.js
    - 开启服务器：第三方模块express
    - 创建路由：第三方模块express
      - 发起请求，接收响应：内置模块https发起请求
    - 响应数据：第三方模块express的res
  - 跨域接口示例：网易云音乐获取歌词接口
    - 请求地址：https://music.163.com/weapi/song/lyric
    - 请求方式：POST
    - 请求时携带数据：params=SkdnPEvyDkxEvyYXjo%2Fc%2BsQ3PrYYd19%2FDywj3P4fu32PdyQ46KTqM1QMLOVwPm6WX0K5pT%2FaYw%2BsX9vu0L5fm42tLc%2BHEZ8lGi5ESkHOA5c%3D&encSecKey=767a95cee4d71d2426fe1ed8854f9d77cbb82a90f7c78beb138a961ee62329015057a50ec196b1f1a5d35fdd146637417471548b7f405db41b3de6b9213af7be963de9a43e5a6a9127ba55f3d507d428e39e514d29aee99d343c142d8bd5e14c7a45e8d93338229f1acc8299a4fe446ff84683794954e297f7fcea390d406dae
    - 响应数据：是一个json数据，主要为歌词内容
- jsonp
  - 见代码
- CORS
  - Node.js（express）

app.all("*", (req,res,next)=>{
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Methods', 'get,post')
  res.header('Access-Control-Allow-Headers', 'Content-Type')
  next();
})

跨域

26：跨域

一、同源策略

二、跨域

三、外部接口

外部接口

玩安卓接口

淘宝下拉菜单

百度下拉菜单