跨域
一个域名地址的组成:
http:// www abc.com : 8080 / scripts/jQuery.JS
协议 子域名 主域名 端口号 请求资源地址
端口号: 一般来说域名端口号是 80, 如果端口号是 80, 可以省略
当协议, 子域名, 主域名, 端口号中任意一个不相同时, 都算作不同域.
不同域之间相互请求资源, 就算作 "跨域"
比如: http://www.abc.com/index.html 请求 http://www.efg.com/service.php
什么是跨域
JavaScript 出于安全方面的考虑, 不允许跨域调用其他页面的对象. 什么是跨域呢, 简单地理解就是因为 JavaScript 同源策略的限制, a.com 域名下的 JS 无法操作 b.com 或是 c.a.com 域名下的对象.
JavaScript 出于安全方面的考虑, 不允许跨域调用其他页面的对象.
- www.abc.com/index.HTML 调用 www.abc.com/service.PHP (非跨域)
- www.abc.com/index.HTML 调用 www.efg.com/service.PHP (跨域)
- www.abc.com/index.HTML 调用 bbs.abc.com/service.PHP (跨域)
- www.abc.com/index.HTML 调用 www.abc.com:81/service.PHP (跨域)
www.abc.com/index.HTML 调用 https://www.abc.com/service.php(跨域) 没有写协议, 默认是 http 协议
主域名
abc.com
子域名
- www.a bc.com
- bbs.abc.com
- beijing.bbs.abc.com
- haidian.beijing.bbs.abc.com
处理跨域方法一一代理
通过在同域名的 web 服务器端创建一个代理:
北京服务器(域名: www.beijjing.com )
上海服务器(域名: www.shanghai.com )
比如在北京的 Web 服务器的后台
( www.beijing.com/proxy-shanghaiservice.PHP )来调用上海服务器
( www.shanghai.com/service.PHP )的服务, 然后再把响应结果返回给
前端, 这样前端调用北京同域名的服务就和调用上海的服务效果相同了.
处理跨域方法二 --JSONP
只能对 GET 请求起到效果, 不能改造 POST 请求.
注意: JSONP 的方式是不支持 POST 请求的
JSONP 可用于解决主流浏览器 (GET 请求) 的跨域数据访问的问题.
在 www.aaa.com 页面中:
- <script>
- function JSONP(ison) {
- alert(JSON["name"]);
- }
- </script>
- //script 标签可以向不同的域名提交 HTTP 请求 // 载入另一个域名的 JSONP.JS
- <script src="http://www.bbb.com/jsonp.js">
- </script>
在 www.bbb.com 页面中:
JSONP({'name':'洪七','age':24));
处理跨域方法三 --XHR2
HTML5 提供的 XMLHttpRequest Level2 已经实现了跨域访问以及其他的一些新功能
IE10 以下的版本都不支持
在服务器端做一些小小的改造即可:
- header('Access-Control-Allow-Origin:*');
- header('Access-Control-Allow- Methods:POST,GET');
来源: http://www.bubuko.com/infodetail-3298074.html