一、跨域概述
跨域是指浏览器在执行JavaScript脚本时,访问不同域名或不同端口的服务器时所产生的安全限制问题。国际互联网从1996年才开始出现真正的跨域,从HTTP协议规范出现到现在,存在的问题越来越多,其中跨域引起的问题受到越来越多的关注。
目前,主流浏览器对于跨域问题都有了一些克服策略。不同的跨域问题,不同的浏览器克服策略不同,所以跨域问题的解决方法也不尽相同。
二、跨域类型
跨域类型主要有以下几种:
1. 域名不同
例如在本地开发测试时,前端页面是通过localhost:8080访问,而后端接口是通过localhost:9090来访问。
2. 端口不同
例如前端页面通过80端口来访问页面,而后端接口却是通过其他端口(如81、82等)来提供服务的。
3. 协议不同
例如前端页面通过https协议来访问,而后端接口却是通过http协议来提供服务的。
4. 域名和子域名不同
例如前端页面通过www.baidu.com来访问,而后端接口是通过api.baidu.com来提供服务的。
三、常见跨域方法
1. JSONP
JSONP是最常用的跨域方法之一,JSONP的基本思路是通过动态创建script标签的方式,来实现不同域之间的数据传输。客户端先定义一个回调函数,然后把这个函数的名字传递给服务器,服务器在返回的数据中将这个函数名作为参数的一部分,客户端只需要执行这个函数,就能拿到需要的数据了。
<script>
function weather(data) {
console.log(data);
}
</script>
<script src="http://api.xxxxx.com/weather?callback=weather"></script>
这种方法需要服务端的接口返回一个函数调用,函数调用的参数为数据。同时,由于是通过script标签来实现跨域的,所以接口返回的是一段可执行的JavaScript代码,因此实现起来相对简单。
2. CORS
CORS是现代浏览器所支持的一种跨域解决方案,全称Cross-Origin Resource Sharing,即“跨域资源共享”。在前端实现时,只需要在服务器端添加一些响应头信息,浏览器就可以自动处理跨域请求了。具体而言,需要在服务器端添加Access-Control-Allow-Origin和Access-Control-Allow-Methods等响应头信息。例如:
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST,GET,OPTIONS');
header('Access-Control-Allow-Headers:x-requested-with,content-type');
这种方法需要服务端的支持,增加了前端和后端的代码工作量,但是可以有效控制跨域访问。
3. 通过代理跨域
通过代理跨域的思路是前端通过AJAX向代理服务器发送请求,代理服务器再将请求发送给接口服务器,接口服务器返回数据后,代理服务器再将数据返回给前端。
这种方法需要在代理服务器上配置一个接口转发的规则(如Apache中的mod_proxy模块),需要一些额外的服务器资源,但是可以实现跨域效果,并且不依赖浏览器的配置。
四、PHP实现CORS跨域访问
1. 前端代码实现
前端代码实现时,在发送请求时需要加上以下代码,表示同意跨域访问:
var xhr=new XMLHttpRequest();
xhr.open('GET','http://api.xxxxx.com/weather',true);
xhr.setRequestHeader('Content-Type','application/json;charset=UTF-8');
xhr.withCredentials=true;
xhr.send();
其中xhr.withCredentials=true表示跨域访问时需要发送cookies等认证信息。
2. 后端代码实现
后端代码实现时,在接收到请求时,需要进行跨域访问授权,示例代码如下:
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:GET,POST,PUT,DELETE,OPTIONS');
header('Access-Control-Allow-Headers:x-requested-with,content-type');
这些响应头信息表示允许访问所有域名,跨域访问方式包括GET、POST、PUT、DELETE和OPTIONS,可以使用的请求头包括x-requested-with和content-type。
五、总结
跨域问题在现代前端开发中越来越普遍,因此了解跨域问题,掌握跨域解决方法是非常重要的。本文主要介绍了跨域概述、跨域类型、常见跨域方法以及PHP实现CORS跨域访问的方法,希望能够帮助读者更好地解决跨域问题。