什么是跨域跨域，指的是从一个域名向另一个域名请求资源。即跨域请求！跨域时，浏览器无法执行其他域名网站的脚本，这是浏览器的同源策略造成的，是浏览器的安全限制。什么是同源策略同源策略是一种约定，是浏览器最核心、最基本的安全功能。如果缺少同源策略，浏览器就容易受到XSS、CSFR等攻击。所谓同源，就是“协议+域名+端口”是相同的，即使两个不同的域名指向同一个IP地址，也不是同源的。同源策略限制包括：①Cookie、LocalStorage、IndexedDB等存储内容②DOM节点③AJAX请求发送后，结果被浏览器拦截，但允许跨域加载资源的标签有3个：①②③常见的跨域场景有哪些？当协议、子域名、主域名、端口号中的任何一项不同时，都算作不同的域。不同域之间的资源请求被认为是“跨域”。常见的跨域场景如下图所示：特别强调两点：第一：如果跨域问题是协议和端口引起的，那“前台”也无能为力。第二：在跨域问题上，只是通过“URL的头部”来识别，而不是根据域名对应的IP地址是否相同。“URL的头部”可以理解为“协议、域名、端口必须匹配”。这里大家可能会有疑问：请求是跨域的，那么请求是发送的吗？跨域不是不能发送请求，可以发送请求，服务器可以正常接收请求并返回结果，但是结果被浏览器拦截了。你可能想知道为什么Ajax不能通过表单发起跨域请求。因为说到底，跨域就是为了防止用户阅读另一个域名下的内容。Ajax可以得到响应，浏览器认为不安全，所以拦截响应。但是表单没有获取到新的内容，所以可以发起跨域请求。同时也说明跨域并不能完全防止CSRF，因为请求毕竟是发送的。严格来说，只要协议、域名、端口有任何不同，就属于跨域。比如在实际项目中，由于前后端分离，当前端需要通过接口向后台发起请求。这时候就会出现跨域问题。那么，如何解决此类问题呢？其实php解决跨域问题很简单，只需要添加如下代码：header("Access-Control-Allow-Origin:*");添加这行代码是为了让所有的域名都可以访问，但是为了安全方便，在实际的项目中，只允许少数固定的域名和方法发起请求。1、允许单个域名访问header('Access-Control-Allow-Origin:http://www.startphp.cn');header('Access-Control-Allow-Methods:POST');//表示只允许POSTRequestheader('Access-Control-Allow-Headers:x-requested-with,content-type');//请求头限制2、不限制域名头('Access-Control-Allow-Origin:*');header('Access-Control-Allow-Methods:POST');//表示只允许POST请求header('Access-Control-Allow-Headers:x-requested-with,content-type');3.允许多个域名访问在实际项目中，最好指定一个可以跨域访问的域名，以增加安全性。可以写在public类中，封装一个方法调用。//设置可访问域名staticpublic$originarr=['https://test1.com','https://test2.com',];/***公共方法调用*/staticpublicfunctionsetheader(){//获取当前跨域域名$origin=isset($_SERVER['HTTP_ORIGIN'])?$_SERVER['HTTP_ORIGIN']:'';if(in_array($origin,self::$originarr)){//允许$originarr数组中的域名跨域访问header('Access-Control-Allow-Origin:'.$origin);//响应类型标头('Access-Control-Allow-Methods:POST,GET');//使用cookieheader进行跨域访问('Access-Control-Allow-Credentials:true');//响应头设置header('Access-Control-Allow-Headers:x-requested-with,Content-Type,X-CSRF-Token');}}如何实现query("setnamesutf8");$sql="select*fromdata其中".$id."不为空";$result=$conn->query($sql);$arr=[];while($row=$result->fetch_assoc()){array_push($arr,json_encode($row));}$json=json_encode($arr);//json数据print_r($json);4Proxy，比如http://www.startphp.cn/index....://www.mano100.cn/server.php，我们可以这样，写一个接口http://www.startphp.cn/server...，这个接口在后端调用http://www.mano100.cn/server....，然后返回index.html，这就是代理模式，相当于绕过了浏览器边，自然不存在跨域问题。5Nginx反向代理使用nginx反向代理实现跨域，这是最简单的跨域方法。只需要修改nginx的配置即可解决跨域问题，支持所有浏览器，支持session，不需要修改任何代码，不会影响服务器性能。实现思路：通过nginx配置代理服务器（域名与domain1相同，但端口不同）作为跳板机，反向代理访问domain2接口，通过修改cookie中的域信息即可方式，方便写入当前域cookie，实现跨域登录。修改配置文件nginx.conf如下：//proxyserverserver{listen81;服务器名称www.domain1.com；位置/{proxy_passhttp://www.domain2.com:8080;#reverseproxyproxy_cookie_domainwww.domain2.comwww.domain1.com；#修改cookieindex.htmlindex.htm中的域名索引；#使用webpack-dev-server等中间件代理接口访问nignx时，此时没有浏览器参与，所以没有同源限制。下面的跨域配置可以不开启add_headerAccess-Control-Allow-Originhttp://www.domain1.com；#当前端只跨域不带cookie时，可以*add_headerAccess-Control-Allow-Credentialstrue;}}修改配置后，重启nginx。index.html文件访问代理服务器//index.htmlvarxhr=newXMLHttpRequest();//前端开关：浏览器是否读写cookiesxhr.withCredentials=true;//访问nginx中的代理服务器xhr.open('get','http://www.domain1.com:81/?user=admin',true);xhr.send();server.js//server.jsvarhttp=require('http');varserver=http.createServer();varqs=require('querystring');server.on('request',function(req,res){varparams=qs.parse(req.url.substring(2));//向前台写入cookieres.writeHead(200,{'Set-Cookie':'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'//HttpOnly:脚本无法读取});res.write(JSON.stringify(params));res.end();});server.listen('8080');console.log('服务器正在8080端口运行...');
