js中实现浏览器跨域访问解决方案

作者：袖梨 2022-06-25

跨域的概念

跨域大家都知道，不同地址，不同端口，不同级别，不同协议都会构成跨域。例如：about. www.111com.net和www.你的域名都会构成跨域。总结起来只要协议、域名、端口有任何一个不同，都被当作是不同的域。下面举例，每两个一组。

URL 说明是否允许通信
http://www.你的域名/a.js
http://www.你的域名/b.js 同一域名下允许

http://www.你的域名/lab/a.js
http://www.你的域名/script/b.js 同一域名下不同文件夹允许

http://www.你的域名:8000/a.js
http://www.你的域名/b.js 同一域名，不同端口不允许

http://www.你的域名/a.js
https://www.你的域名/b.js 同一域名，不同协议不允许
http://www.你的域名/a.js
http://60.32.92.74/b.js 域名和域名对应ip 不允许

http://www.你的域名/a.js
http://about.你的域名/b.js 主域相同，子域不同不允许

http://www.你的域名/a.js
http://你的域名/b.js 同一域名，不同二级域名（同上）不允许（cookie这种情况下也不允许访问）

http://www.hao123.com/a.js
http://www.你的域名/b.js 不同域名不允许
解决跨域的方案

上一篇文章，我写了window.postMessage，是一种跨域的解决方案。今天再介绍几个。

CORS跨域资源共享

众所周知，我们之前跨域很多时候用的是jsonp的方式，jsonp的方式我后面介绍。下面说说CORS跨域和jsonp跨域的优势：

CORS与JSONP相比，无疑更为先进、方便和可靠。

1、 JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。
2、使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。
3、 JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS。[低版本IE7以下不支持，要支持IE7还是要用jsonp方式]
CORS的使用

CORS要前后端同时做配置。

1、首先我们来看前端。

纯js的ajax请求。

以上的haorooms是相对路径，如果我们要使用CORS，相关Ajax代码可能如下所示：

当然，你也可以用jquery的ajax进行。

2、后端或者服务器端的配置

下面我们主要介绍Apache和PHP里的设置方法。

Apache：Apache需要使用mod_headers模块来激活HTTP头的设置，它默认是激活的。你只需要在Apache配置文件的 < Directory >, < Location>, < Files >或< VirtualHost>的配置里加入以下内容即可：

Header set Access-Control-Allow-Origin *
PHP：只需要使用如下的代码设置即可。

header("Access-Control-Allow-Origin:*");
以上的配置的含义是允许任何域发起的请求都可以获取当前服务器的数据。当然，这样有很大的危险性，恶意站点可能通过XSS攻击我们的服务器。所以我们应该尽量有针对性的对限制安全的来源，例如下面的设置使得只有www.你的域名这个域才能跨域访问服务器的API。

Access-Control-Allow-Origin: http://www.你的域名
通过jsonp跨域

jsonp跨域也需要前后端配合使用。一般后端设置callback ，前端给后台接口中传一个callback 就可以。

例如前端代码：

后台代码：

$callback = $_GET['callback'];//得到回调函数名
$data = array('a','b','c');//要返回的数据
echo $callback.'('.json_encode($data).')';//输出
?>
假如你用ajax方式进行jsonp跨域，我之前的一篇文章中提及过：http://www.你的域名/post/jquery_ajax_wg

/*
//简写形式，效果相同
$.getJSON("url跨域地址", {参数，要把callback作为参数传到后端}，
        function(data){
            //结构处理
},"jsonp");
*/
$.ajax({
    type : "get",
    url : "跨域地址",
    dataType : "jsonp",//数据类型为jsonp
    jsonp: "callback",//服务端用于接收callback调用的function名的参数【后台接受什么参数，我们就传什么参数】我们上面设置是callback
    success : function(data){
        //结果处理
    },
    error:function(data){
          console.log(data);
    }
});
通过修改document.domain来跨子域

我们只需要在跨域的两个页面中设置document.domain就可以了。修改document.domain的方法只适用于不同子域的框架间的交互。

例如：1.在页面 http:// www.你的域名/a.html 中设置document.domain

使用window.name来进行跨域

原理：

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的。

方法：

假如有三个页面。

a.com/app.html：应用页面。
a.com/proxy.html：代理文件，一般是一个没有任何内容的html文件，需要和应用页面在同一域下。
b.com/data.html：应用页面需要获取数据的页面，可称为数据页面。
1、在应用页面（a.com/app.html）中创建一个iframe，把其src指向数据页面（b.com/data.html）。

数据页面会把数据附加到这个iframe的window.name上，data.html代码如下：

2、在应用页面（a.com/app.html）中监听iframe的onload事件，在此事件中设置这个iframe的src指向本地域的代理文件（代理文件和应用页面在同一域下，所以可以相互通信）。

app.html部分代码如下：

3、获取数据以后销毁这个iframe，释放内存；这也保证了安全（不被其他域frame js访问）。

使用HTML5的window.postMessage方法跨域

关于postMessage

window.postMessage虽然说是html5的功能，但是支持IE8+，假如你的网站不需要支持IE6和IE7，那么可以使用window.postMessage。关于window.postMessage，很多朋友说他可以支持跨域，不错，window.postMessage是客户端和客户端直接的数据传递，既可以跨域传递，也可以同域传递。

应用场景

我只是简单的举一个应用场景，当然，这个功能很多地方可以使用。

假如你有一个页面，页面中拿到部分用户信息，点击进入另外一个页面，另外的页面默认是取不到用户信息的，你可以通过window.postMessage把部分用户信息传到这个页面中。（当然，你要考虑安全性等方面。）

代码举例

发送信息：

//弹出一个新窗口
var domain = 'http://你的域名';
var myPopup = window.open(domain
+ '/windowPostMessageListener.html','myWindow');

//周期性的发送消息
setTimeout(function(){
    //var message = '当前时间是 ' + (new Date().getTime());
        var message = {name:"站点",sex:"男"}; //你在这里也可以传递一些数据，obj等
    console.log('传递的数据是 ' + message);
    myPopup.postMessage(message,domain);
},1000);

要延迟一下，我们一般用计时器setTimeout延迟再发用。

接受的页面

//监听消息反馈
window.addEventListener('message',function(event) {
if(event.origin !== 'http://你的域名') return; //这个判断一下是不是我这个域名跳转过来的
console.log('received response: ',event.data);
},false);
如下图，接受页面得到数据

enter image description here

如果是使用iframe，代码应该这样写：

//捕获iframe
var domain = 'http://你的域名';
var iframe = document.getElementById('myIFrame').contentWindow;

//发送消息
setTimeout(function(){
    //var message = '当前时间是 ' + (new Date().getTime());
        var message = {name:"站点",sex:"男"}; //你在这里也可以传递一些数据，obj等
    console.log('传递的数据是: ' + message);
        //send the message and target URI
    iframe.postMessage(message,domain);
},1000);

接受数据

//响应事件
window.addEventListener('message',function(event) {
    if(event.origin !== 'http://你的域名') return;
    console.log('message received: ' + event.data,event);
    event.source.postMessage('holla back youngin!',event.origin);
},false);

上面的代码片段是往消息源反馈信息，确认消息已经收到。下面是几个比较重要的事件属性：

source – 消息源，消息的发送窗口/iframe。
origin – 消息源的URI(可能包含协议、域名和端口)，用来验证数据源。
data – 发送方发送给接收方的数据。