JavaScript 跨域问题

js 跨域

JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。

服务端一行代码解决跨域问题：设置header字段

Access-Control-Allow-Origin:*

什么是跨域呢？

简单的理解就是因为Javascript同源策略的限制，a.com域名下的js无法操作b.com或者c.a.com域名下的对象。

如：www.abc.com/index.html 调用www.abc.com/service.php (非跨域)

www.abc.com/index.html 调用www.cba.net/service.php (跨域)

www.abc.com/index.html 调用bbs.abc.com/service.php (跨域)

www.abc.com/index.html 调用www.abc.com:81/service.php (跨域)

www.abc.com/index.html 调用https://www.abc.com/service.php (跨域)

处理跨域方法一 — 代理

通过在同名的web服务器创建一个代理：

abc服务器（域名：www.abc.com）

cba服务器（域名：www.cba.net）

比如在aseoe的web服务器的后台

（www.abc.com/proxy-anctoservice.php）来调用ancto服务器

（www.cba.net/service.php）的服务，然后再把响应结果返回给前端，

这样前端调用aseoe同域名的服务就和ancto的服务效果相同了

处理跨域方法二 — JSONP

JSONP可用于解决主流浏览器的跨域数据访问的问题。

在www.abc.com页面中：

<script>
function jsonp(json) {
alert(json["name"]);
}
</script>
<script src="http://www.cba.net/jsonp.js"></script>

在www.ancto.net页面中：

jsonp({'name':web,'job':'前端'});

JSONP不支持POST请求

处理跨域方法三 — XHR2

HTML5提供的XMLHttpRequest Level2 已经实现了跨域访问以及其他的一些新功能

IE10以下的版本都不支持

在服务器做一些小小的改造即可：

header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST,GET');