一、什么是跨域?
跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。但是一般情况下不能这么做,它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制。跨域的严格一点的定义是:只要 协议,域名,端口有任何一个的不同,就被当作是跨域
所谓同源是指,域名,协议,端口均相同。这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。
只要协议、域名、端口有任何一个不同,都被当作是不同的域
http://www.123.com/index.html 调用 http://www.123.com/server.PHP (非跨域)
http://www.123.com/index.html 调用 http://www.456.com/server.php (主域名不同:123/456,跨域)
http://abc.123.com/index.html 调用 http://def.123.com/server.php (子域名不同:abc/def,跨域)
http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php (端口不同:8080/8081,跨域)
http://www.123.com/index.html 调用 https://www.123.com/server.php (协议不同:http/https,跨域)
请注意:localhost和127.0.0.1虽然都指向本机,但也属于跨域。
浏览器执行javascript脚本时,会检查这个脚本属于哪个页面,如果不是同源页面,就不会被执行。
对于端口和协议的不同,只能通过后台来解决。
二、为什么浏览器要限制跨域访问呢?
原因就是安全问题:如果一个网页可以随意地访问另外一个网站的资源,那么就有可能在客户完全不知情的情况下出现安全问题。比如下面的操作就有安全问题:
用户访问www.mybank.com ,登陆并进行网银操作,这时cookie啥的都生成并存放在浏览器
用户突然想起件事,并迷迷糊糊地访问了一个邪恶的网站 www.xiee.com
这时该网站就可以在它的页面中,拿到银行的cookie,比如用户名,登陆token等,然后发起对www.mybank.com 的操作。
如果这时浏览器不予限制,并且银行也没有做响应的安全处理的话,那么用户的信息有可能就这么泄露了。
三、为什么要跨域?
既然有安全问题,那为什么又要跨域呢? 有时公司内部有多个不同的子域,比如一个是location.company.com ,而应用是放在app.company.com , 这时想从 app.company.com去访问 location.company.com 的资源就属于跨域。
四、解决跨域问题的方法(服务端为PHP,前端为jQuery)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// 设置允许跨域的域名 if(isset($_SERVER["HTTP_ORIGIN"])) { header('Access-Control-Allow-Origin:'.$_SERVER["HTTP_ORIGIN"]); }else{ header('Access-Control-Allow-Origin:*'); } // 设置允许的请求头 header('Access-Control-Allow-Headers:*'); // 设置允许发送请求凭证(设置可携带cookie) header('Access-Control-Allow-Credentials:true'); // 设置允许请求的方式 header('Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS'); // 允许访问的有效期 header('Access-Control-Max-Age:86400'); |
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$.ajax({ url: 'https://127.0.0.1/login.php', type: 'POST', data: {username: 'admin'}, dataType: 'json', xhrFields: { withCredentials: true }, crossDomain: true, success: function (re) { console.log(re); } }); |
发布评论