【Web】跨域请求

一、同源策略

• 同源策略是由浏览器给的行为
  • 浏览器不允许我们向别人发送请求，只能向自己的服务器发送请求
  • 当我们向别人的服务器发送请求的时候，就会被浏览器阻止了
• 当你在发送请求的时候，会涉及到两个地址
  • 你打开当前页面的地址，如：localhost/index.html
  • 你要请求的地址，如：localhost/a.php
• 两个地址中的 端口号 域名 传输协议
  • 只要有任意一个不一样，就是非同源请求
  • 就会触发浏览器的同源策略
• 我们管触发了同源策略的请求叫做跨越请求

二、实现跨域

• 有的时候我们是需要实现跨域请求的
• 我们需要多个服务器给一个页面提供数据
• 那么这个时候我们就要想办法解决跨域问题

2.1、jsonp

了解 script 标签：

• script标签src属性，本质就是一个请求一个外部资源，是不受到同源策略的影响的
• script标签的src属性请求回来的东西是一个字符串，浏览器会把这个字符串当作js代码来执行
• jsonp 的核心就是利用 script 这个特性来进行跨域请求

• 以 get 的方式将前端回调处理函数名称告诉后端，后端在响应请求时会将回调返还，并且将数据以参数的形式传递回去

<!-- html中js代码 -->
<script>
	// 准备好一个函数接收数据
	function fn(data){
		console.log('这个是处理天气预报数据的函数');
		// data 里面就是后端调用函数传入的实参
		console.log(data);
	}
</script>
<!-- 以参数形式告诉后端，你准备好的函数名是什么 --> 
<script src="http://127.0.0.1/report.php?callback=fn"></script>

<?php
//  通过前端的callback属性获取函数名
$cbName = &_GET['callback'];
// 下面是一个函数调用，里面的实参就是想要返回给前端的数据
// 这个调用的函数必须是前端事先定义好的
echo "$cbName('这是天气预报数据')";
?>

• 优缺点：

优点：
	简单且兼容性好
缺点：
	jsonp 只能发送 get 请求，不能发送 post 等其他请求
	JSONP是从其他域中加载代码执行，容易受到跨站请求伪造的攻击，其安全性无法确保
	不能注册success、error等事件监听函数，不能很容易的确定JSONP请求是否失败

• 优点：绕开了同源策略，实现跨域请求，使用方便
• 缺点：不好做安全防范，在渐渐被取代

2.2、cors

CORS 是 W3C 颁布的一个浏览器技术规范，其全称为“跨域资源共享”（Cross-origin resource sharing），它的意义在于，它是由W3C官方推广的允许通过AJAX技术跨域获取资源的规范，是官方推荐的跨域资源共享方案。

• 当使用 XMLHttpRequest 发送请求时，浏览器如果发现违反了同源策略就会自动加上一个请求头 origin，
• 后端在接受到请求后确定响应后，会在响应头中加入一个属性 Access-Control-Allow-Origin，值就是发起请求的源地址(http://127.0.0.1:8888)，
• 浏览器得到响应会进行判断 Access-Control-Allow-Origin 的值是否和当前的地址相同，只有匹配成功后才进行响应处理。

// js 文件
<script>
// 1. 创建AJAX对象
var xhr = new XMLHttpRequest();
// 2. 配置请求信息
xhr.open("get","http://127.0.0.1/text.php?a=1&b=2");
// 3. 接收响应
xhr.onload = function(){
	console.log(xhr.responseText);
}
// 4. 发送请求
xhr.send();
</script>

// text.php 文件
<?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');

	// 前后端交互的数据格式是：json字符串
	echo json_encode($_REQUEST);
?>

2.3、nginx 代理

原理：使用nginx同时代理 server1和server2，则对于浏览器来说，它只访问了一个地址（nginx服务器的地址），会认为是同一个域，从而实现跨域访问。

server{
    listen 8060;
    server_name localhost;
    
    当访问/user/csrf 时，去到8062端口
    location /user/csrf {
        proxy_pass http://localhost:8062;
    }
    非访问/user/csrf 时，去到8061端口
    location / {
        proxy_pass http://localhost:8061;
    }
}

- 只要是服务器就能设置代理
	- apache 服务器代理
		- HTTP 协议的不需要花钱
		- HTTPS 协议的需要花钱
	- nginx 服务器代理
		- http 和 https 都是免费的
		- 所以我们使用nginx服务器

- phpstudy进行nginx服务器代理配置步骤：

1 打开phpstudy窗口
    ==> 点击切换版本
    ==> 点击php5.4.xxx+nginx
2 打开phpstudy窗口
    ==> 点击其他选项菜单
    ==> 点击打开配置文件
    ==> 点击nginx-conf（config）
        ==> 大概在56行左右有一个server
        ==> 顺着开始括号找到server的闭合大括号（大概在102行）
        ==> 在这个闭合大扩号的上面一行书写代理配置
    ==> 代理配置
        ==> 空格不能省略不写。
        ==> /cyr是你们自己定的，写什么都可以
            ==> 斜线是必须要有的
        ==> {}里面的那个地址，就是你要跨域请求的地址（目标服务器的地址）
        ==> 最后的分号必须有
        location = /cyr {
            proxy_pass http://127.0.0.1/text.php;
        }
        ==> 修改完毕以后，一定要重启服务器
    ==> 当你在nginx服务器上发送请求
        --> 只要请求你自己的代理标识符
        --> 那么就会由nginx服务器来帮你转发请求给proxy_pass地址
注意:
    + 当切换到nginx服务器以后
    + 不管是html文件还是php文件，都不能用中文，否则报错
  

• js 文件代码

<script>
// 1 创建ajax对象
var xhr = new XMLHttpRequest();
// 2 配置请求信息
xhr.open('GET','http://localhost/cyr?aa=100&cc=345');
// 3 接收响应
xhr.onload = function(){
	console.log(xhr.responseText);
}
// 4 发送请求
xhr.send();
</script>

• text.php 文件代码

<?php
	// 前后端交互的数据格式是：json字符串
	echo json_encode($_REQUEST);
?>

三、了解代理

3.1、正向代理

• 有一个客户端需要向一个非同源的服务器B发送请求
• 我们搭建一个和客户端同源的服务器A
• 当客户端发送请求的时候，由服务器A来接受
• 再由服务器A向服务器B发送请求，因为 同源策略是由浏览器给的，服务器之间没有
• 服务器B接受到请求以后，会处理请求，并把响应返回给服务器A
• 再由服务器A把响应给到客户端就可以了
• 我们就可以用这个方式来进行跨域请求了

3.2、反向代理

• 反向代理一般是用来做负载均衡的
• 当我请求一个服务器的时候，其实请求的是服务器端设置的代理服务器
• 由代理服务器把若干大量的请求分发给不同的服务器进行处理
• 再由服务器把响应给到代理服务器
• 代理服务器返回给客户端