ajax day03 同源与非同源以及解决方案

ajax请求限制

ajax只能想自己的服务器发送请求，即同源的网页

同源： 如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源

同源政策的目的： 为了保证用户的信息安全

解决同源限制的方法

JSONP 方法

jsonp 是 json with padding 的缩写，它不属于 Ajax 请求，但它可以模拟 Ajax 请求。

jsonp解决方案的原理：

jsonp是通过script标签来发送请求(script标签的src属性可以设置为非同源网站的地址)，不会触发同源策略。

当我们请求别人的服务器接口的时候，别人的服务器会返回一个函数调用的代码并且通过函数的参数传递服务器的数据。

利用script标签的src属性可以发送跨域请求。

<button id="btn">点我发送请求</button>
	<script>
		function fn2 (data) {
			console.log('客户端的fn函数被调用了')
			console.log(data);
		}
	</script>
	<script type="text/javascript">
		// 获取按钮
		var btn = document.getElementById('btn');
		// 为按钮添加点击事件
		btn.onclick = function () {
			// 创建script标签
			var script = document.createElement('script');
			// 设置src属性
			script.src = 'http://localhost:3001/better?callback=fn2';
			// 将script标签追加到页面中
			document.body.appendChild(script);
			// 为script标签添加onload事件
			script.onload = function () {
				// 将body中的script标签删除掉
				document.body.removeChild(script);
			}
		}
	</script>

CORS 跨域资源共享

在服务器进行设置，设置允许发送ajax请求。

此时在服务器设置好了CORS之后，服务器可以接收同源的ajax请求，

也可以接收跨域的ajax请求。

主要是后台代码发生了改变，从原本默认不允许发送ajax跨域请求更改成了允许发送ajax请求。

写法：

//拦截所有请求
app.use((req, res, next) => {
	// 1.允许哪些客户端访问我
	// * 代表允许所有的客户端访问我
	res.header('Access-Control-Allow-Origin', '*')
	// 2.允许客户端使用哪些请求方法访问我
	res.header('Access-Control-Allow-Methods', 'get,post')
	next();
});

服务器代理

默认情况下，前端页面无法发送ajax请求获取别人服务器的数据。但是，后台可以发送请求获取别人服务器的数据。

服务器代理获取别人服务器数据的方式如下：

让我们自己的后台发送请求获取别人服务器的数据，然后将获取到的数据制作成自己服务器的接口，

前端页面就可以直接发送请求，请求自己服务器的接口，这是一个同源的请求。

设置携带cookie 信息

//允许ajax请求携带cookie

xhr.withCredentials = true;

//后台也需要允许携带cookie

res.header('Access-Control-Allow-Credentials', true);

在使用Ajax技术发送跨域请求时，默认情况下不会在请求中携带cookie信息。

withCredentials：指定在涉及到跨域请求时，是否携带cookie信息，默认值为false

Access-Control-Allow-Credentials：true 允许客户端发送请求时携带cookie