一、什么是跨域？
跨域是指从一个域名的网页去请求另一个域名的资源。比如从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); } }); |
发布评论