跨域及其解决方案

什么是跨域

浏览器使用ajax时，如果 请求的 接口地址 和当前打开的页面地址 不同源称之为跨域

同源不同源

同源不同源
同源：协议和地址和端口 都一样
不同源：协议、地址、端口有一个不同就是不同源

同源策略

同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，
因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。

跨域解决方案介绍

解决跨域的问题方案也有很多，但是常用的就两种

通过jsonp跨域

使用原理:通过动态创建script标签通过script标签的src请求没有跨域限制来获取资源
jsonp的封装

function jsonp(url,options={callback:'callback',jp:'jp'}){
				var callback=options.callback || 'callback';
				var jp=options.jp || 'jp';
				var url=url+`&${callback}=${jp}`;
			var script=	document.createElement('script');
				script.setAttribute('src',url);
				var head=document.querySelector('head');
				head.appendChild(script);
				return new Promise((resolve,reject)=>{
					window[jp]=function(data){
						resolve(data);
					};
					script.onload=function(){
						head.removeChild(script);
					};
					script.onerror=function(err){
						head.removeChild(script);
						reject(err);
					}
				})
			};
		
		var urlB='http://127.0.0.1/fun.php?';
		jsonp(urlB).then(res=>{
			console.log(res);
		})

后端代码

<?php
$callback=$_GET['callback'];
echo $callback."('这是一个寂寞的天')";
?>

CORS

-目前的主流方案，也是最简单的方案,直接让后端设置响应头,允许资源共享就ok.

header("Access-Control-Allow-Origin: *");后端设置响应头