1.什么是同源策略
同源策略是为了增强浏览器上的安全性
同源:URL由协议、域名、端口和路径组成;如果URL的协议、域名和端口相同,则表示他们同源
浏览器的同源策略,限制了来自不同源的‘document’或脚本,对当前‘document’读取或设置某属性。
从一个域上加载的脚本不允许访问另一个域的文档属性。
2.解决方案
(1)基于jsonp实现的跨域请求
页面中的链接、重定向以及表单提交是不会受到同源策略的限制。
跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入到页面中的script、img、link、iframe等。
同源策略只是对网页的HTML文档做了限制,对加载的静态资源如JavaScript、css、图片等仍然认为属于同源。
img标签的src和link标签的href也会发送一个get请求去请求静态资源,本质上来说也是一个get请求,这些标签的src和link属性,并没有收到同源策略的限制。
jsonp就是利用了同源策略这一漏洞,实现的跨域请求;这也是jsonp跨域只能用于get请求的原因所在。
核心:callback;jsonp发送get请求不过它&符号在地址后拼接了callback回调函数名称。jsonp整个过程类似于前端声明好一个函数,后端返回执行函数。执行函数参数中携带所需要的数据。
(2)nginx反向代理
安装nginx,在其中选择要安装的版本,安装完成后解压
配置要被代理的服务
在nginx-1.16.1 =》conf =》nginx.conf 里进行配置(代码中找到server在里面添加代码)
(3)后端设置CORS来解决跨域
通常后端来做
<?php
header("Access-Control-Allow-Origin:*");
header("Access-Control-Request-Methods:GET, POST, PUT, DELETE, OPTIONS");
header('Access-Control-Allow-Headers:x-requested-with,content-type,test-token,test-sessid');
?>
(4)配置代理
代理,分成两种,正向代理和反向代理
正向代理
- 有一个客户端需要向一个非同源的服务器B发送请求
- 我们搭建一个和客户端同源的服务器A
- 当客户端发送请求的时候,由服务器A来接受
- 再由服务器A向服务器B发送请求,因为 同源策略是由浏览器给的,服务器之间没有
- 服务器B接受到请求以后,会处理请求,并把响应返回给服务器A
- 再由服务器A把响应给到客户端就可以了
- 我们就可以用这个方式来进行跨域请求了
反向代理 - 反向代理一般是用来做负载均衡的
- 当我请求一个服务器的时候,其实请求的是服务器端设置的代理服务器
- 由代理服务器把若干大量的请求分发给不同的服务器进行处理
- 再由服务器把响应给到代理服务器
- 代理服务器返回给客户端