XMLHttpRequest cannot load 跨域问题解决

16-01-08 来源：[db:作者]

收藏我要投稿

在众多站群中，不同功能的系统使用独立的一个域名，各系统之间存在相互调用的关系。使用js的XMLHttpRequest调用其他域名提示跨域权限不足。有些可能认为都同属于同一个顶级域名或者说域名一模一样怎么会存在跨域问题.

先来看下错误
“XMLHttpRequest cannot load http://comment.ttlsa.com/api/post?id=1&msg=123123123&code=453423&username=凉白开 Origin http://www.ttlsa.com is not allowed by Access-Control-Allow-Origin.”

什么是Access-Control-Allow-Origin
Access-Control-Allow-Origin是HTML5中定义的一种服务器端返回Response header，用来解决资源（比如字体）的跨域权限问题。
它定义了该资源允许被哪个域引用，或者被所有域引用（google字体使用*表示字体资源允许被所有域引用）。

由此可见，相同域必须忙住协议相同、端口相同、域名相同. 只要其中一点不满足那就是跨域

跨域案例
站点www.ttlsa.com需要调用comment.ttlsa.com/api/post.php,那么这个post.php必须加上如下代码
代码1

1	header("Access-Control-Allow-Origin: http://www.2cto.com");

代码2
header方式不能使用正则，例如*.ttlsa.com，不过我们可以使用如下方法，将内容echo到php响应内容中

1	echo '<meta http-equiv="Access-Control-Allow-Origin" content="*.ttlsa.com">';

目前还不清楚为什么header里面用不了正则，而meta里面可以用正则.后续查找原因，知道的兄弟请留言告知，小生在此谢过.

从上面的代码可以看出, 代码1安全性不够，但是使用接口的人只会获取到响应的body内容。代码2相对安全，但是响应的body内容体里面包含<meta http-equiv="Access-Control-Allow-Origin" content="*.ttlsa.com">，多少影响接口的使用.

点击复制链接与好友分享!回本站首页