跨域解决方案

Posted 2020-11-26 mdr86553

 

跨域：

1. 1. 跨域的条件：同源策略（协议 域名 端口 三者）三者任一不同就为跨域

   2. 跨域的解决方案

      1. jsonp （json padding) (callback({a: 1, b: 2})) 前端定义好这个函数的业务逻辑，利用script标签可以引入任意外部的资源

      2. cors（跨站资源共享）

         1. 在使用时前端正常发起异步请求，后端需要设置允许的请求头 请求方法 请求域名

            1. access-control-allow-origin: 设置请求域名/主机

            2. access-control-allow-headers: 设置请求头

            3. access-control-allow-methods: 设置请求方法

         2. 什么是预检请求 options类型，什么情况下发起预检请求

            1. 简单请求不需要发起预检，直接传输数据到后台

               1. 请求方法：get post head

               2. 请求头：accept accept-lunguage content-type content-length last-eventID

               3. 发送请求的数据格式：text/plain application/x-www-form-urlencoded multipart/form-data

            2. 非简单请求需要先进行预检，如果后台支持的话再携带数据发起请求到后台

      3. 反向代理（客户端 => 网页服务器(nginx) => node.js / php / java / python)

         1. 如果代理服务器代理的是后台的处理程序，那就是反向代理。当前页面www.a.com，想请求一个接口www.b.com/api/test，此时网页正常发起请求www.a.com/api/test到达网页服务器nginx，nginx此时收到请求，重置请求域名到www.b.com下的接口地址上，当真正的接口数据返回后，nginx再把数据返回给前端（前端 => 开发服务器8080 => 8888）

      4. iframe + window.name / window.hash

         1. 比如当前页面1www.a.com/abc，请求的接口地址www.b.com/api/test。在页面1下内嵌一个iframe，iframe的src属性赋值www.b.com/abc页面2，在页面2中发起异步请求，拿到数据后写在window.name或者window.hash，重置iframe的src属性（更改页面地址），更改到a域名下的一个页面 3，页面3和页面2是同一个窗口，所以页面3能够取到页面2写在window.name或者window.hash的数据

      5. onMessage和postMessage: IE6 7不支持，ie8支持部分内容

      6. document.domain: 仅适用主域相同跨子域的情况. 页面位于www.a.com下，请求的接口位于api.a.com