saber酱的抱枕

哀哉京阿尼

04/20
08:00
学习

使用Access-Control-Allow-Origin解决Ajax跨域问题

跨域问题是web开发中一个常见的问题。例如说从网站a.com上用ajax把一些信息发送到b.com上,就会产生跨域问题。浏览器为了安全会阻止这个跨域请求,并产生一个跨域错误。

如果接收方b.com对应的文件是php文件,则可以在header函数中指定Access-Control-Allow-Origin的值,来设置哪些域名可以向这里发送跨域请求。

示例:

ajax请求如下(本彩笔使用了jq的ajax):

$.ajax({
    url:"http://127.0.0.1/t/t.php",
    type:"get",
    async:true,
    cache:false,
    dataType:"text",
    success:function  (data) {
        alert(data);
    }
});

php文件添加Access-Control-Allow-Origin头:

header("Access-Control-Allow-Origin:*"); // 允许指定域名发起的跨域请求
//header("Access-Control-Allow-Origin:http://tieba.baidu.com"); // 允许指定域名发起的跨域请求
echo "saber";

这就ok了。

如果不想把Access-Control-Allow-Origin设置为*(允许所有域名),可以单独设置为a网站的location.hostname。格式如第二行注释里的,最前面加http协议头,最后面不要斜杠。

这里我有个疑惑,如果想允许多个域名跨域,该怎么设置呢?以下是我走的弯路:

错误方法1:直接写多个header("Access-Control-Allow-Origin: "),每个里面设置一个域名。结果只有最后一个生效。

错误方法2:用分号连写多个域名:Access-Control-Allow-Origin:host1,host2,host3。结果这几个域名带分号合一起作为一个值了,那就一个都别想生效了。

正确方法是获取ajax请求的来源网址,看它是不是在允许的列表里,然后动态添加Access-Control-Allow-Origin头。如下:

if(strpos($_SERVER['HTTP_REFERER'],"http://www.saber.love")===0){//判断来源url是否以指定的域名作为开头
    header("Access-Control-Allow-Origin:http://www.saber.love"); // 允许指定域名发起的跨域请求
};
echo "saber";

如果有多个域名,就多判断几次,然后设置对应的Access-Control-Allow-Origin头即可。

使用Access-Control-Allow-Origin解决Ajax跨域问题