ajax的跨域问题


blob.png

最近在做IOS端,android端和web端三端API的设计,因为api基于token认证,所以我们基本可以无视session和cookie的存在,不过由于业务逻辑中出现了图形验证码的逻辑,众所周知,图片验证码一般基于session认证,所以三端请求的时候带上请求验证码时所返回的cookie即可,一般情况下,js的ajax是会自动带上cookie的,并不需要像android和ios那样手动取cookie再带上。但是!!由于api设计时配置的是独立的域名,api.zcx.win,然而前端一般是www.zcx.win这样,前后端域名不一样了,这时候,就存在一个ajax的跨域问题。其实很好解决,前后端在头部做一些处理即可。  

顺便解释下跨域:由于ajax的安全机制,当前端所处的服务器域名与ajax请求的接口域名不一致时,会出现无法访问的情况,ajax只能访问本地的资源,不能跨域。比如当协议、子域名、主域名、端口号中任意一各不相同时,都算不同的“域”。一般这时候设置服务器返回头 【 Access-Control-Allow-Origin:*  】即可,但是,此时,ajax会自动屏蔽所有cookie,无法实现基于session的认证,所以,我们需要设置前后端才行。

blob.png


如下:jquery的ajax方法加上xhrFields属性即可

$.ajax({
    type: "POST",
    url: "http://api.zcx.win",
    dataType: 'json',
    xhrFields: {
        withCredentials: true
    },
    success:function(){
    },
    error:function(){
    }
})

然后在服务器端,设置返回头Access-Control-Allow-Credentials和Access-Control-Allow-Origin就行了。

header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: http://www.zcx.win");


本文 暂无 评论

Top