跨域几种解决方案

2020-03-31 本文已影响0人平凡人笔记

一、JSONP：利用script标签可跨域的特点，在跨域脚本中可以直接回调当前脚本的函数 1）jsonp出现背景简介： 1、出现跨域的原因：浏览器同源策略导致 2、浏览器同源场景：同一协议、同一域名、同一个端口 3、类比正常使用场景：script、img、a 的src hrep 标签属性 a、举一例分析：img src 获取一张图片 get请求获取文件流展示到页面上 4、josnp利用该原理而产生： a、仅get请求传参里面包含js函数名称 b、接口返回内容里面包含一个js 函数名称 c、页面上解析返回内容并调用该js函数 5、代码：

二、CORS：服务器设置HTTP响应头中Access-Control-Allow-Origin值，解除跨域限制 1、代码

三、通过中间接口转发避免前端页面出现跨域问题

四、搭建API网关

五、正向代理和反向代理比较

从用途上来讲：

正向代理的典型用途是为在防火墙内的局域网客户端提供访问Internet的途径。正向代理还可以使用缓冲特性减少网络使用率。
反向代理的典型用途是为后端的多台服务器提供负载平衡，或为后端较慢的服务器提供缓冲服务。

从安全性来讲：

正向代理允许客户端通过它访问任意网站并且隐藏客户端自身，因此你必须采取安全措施以确保仅为经过授权的客户端提供服务。
反向代理对外都是透明的，访问者并不知道自己访问的是一个代理。

从使用方来看：

正向代理是浏览器端进行配置的，与服务器端无关，甚至可以对服务端隐藏。
反向代理是服务器端配置的，对浏览器端是透明的。

利用正向代理实现跨域

实现原理

对正向代理服务器进行配置，当获取非接口数据时，让代理服务器指向开发者本机的资源。当访问接口时，访问后端接口数据。

相当于大佬让小弟把酱排骨饭里面的饭和酱排骨分开买，饭自己家煮，酱排骨才去饭店买。

程序运行过程

浏览器访问页面，假设访问淘宝页面：taobao.com/index.html（假设这个页面中调用了taobao.com/api/getNew获取最新商品的接口）
taobao.com/index.html请求经过代理服务器，根据配置，index.html页面请求127.0.0.1:3000
127.0.0.1:3000返回index.html文件给浏览器。
浏览器运行index.html页面，发起taobao.com/api/getNew请求。
taobao.com/api/getNew请求经过代理服务器，但由于没有对这个接口进行特殊配置，这个接口会正常访问道淘宝服务器。
淘宝服务器接受到taobao.com/api/getNew请求，检查请求头的hosts字段，发现是taobao.com，没有跨域，将结果返回给代理服务器。
代理服务器拿到结果，返回给浏览器，浏览器进行解析显示。

代理配置(以mac下的charles为例)

window上可使用fiddler实现相同功能，可参看这篇文章。

打开charles的映射关系表【charles->tool->Map Remote】。

点击add可以添加映射关系。

点击 ? 符号，可以进入配置规则介绍页面。

注意

匹配taobao.com/api/*的配置项要放在匹配taobao.com/*的配置项前，让匹配API的优先级更高。否则将只匹配到taobao.com/*的配置。
如果接口请求中，有涉及到https协议的，需要提前在电脑上安装charles证书，详情点击这里。
chrome系浏览器的请求是不经过charles代理的，这时需要设置电脑上的网络设置，设置代理地址为charles的服务地址。