ajax出现XMLHttpRequest cannot load 跨域问题解决办法

---

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

先来看下错误

“XMLHttpRequest cannot load http://m.genban.org/api/post?id=1&msg=123123123&code=453423 Origin http://www.genban.org is not allowed by Access-Control-Allow-Origin.”

什么是Access-Control-Allow-Origin

Access-Control-Allow-Origin是HTML5中定义的一种服务器端返回Response header，用来解决资源（比如字体）的跨域权限问题。

它定义了该资源允许被哪个域引用，或者被所有域引用（google字体使用*表示字体资源允许被所有域引用）。

什么是资源跨域权限

先来看看同域和不同域的长相

相同域

http://www.genban.org/

http://www.genban.org/moban

不同域

http://www.genban.org

http://m.genban.org

https://www.genban.com

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

跨域案例

站点www.genban.org需要调用m.genban.org/api/post.php,那么这个post.php必须加上如下代码
 

代码1

 

header("Access-Control-Allow-Origin: http://www.genban.org");

 

代码2
 

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

 

echo '<meta http-equiv="Access-Control-Allow-Origin" content="*.genban.org">';

 

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

从上面的代码可以看出, 代码1安全性不够，但是使用接口的人只会获取到响应的body内容。代码2相对安全，但是响应的body内容体里面包含