前端跨域问题的解决方案

跨域是浏览器的一种安全策略，是浏览器自身做的限制，不允许用户访问不同域名或端口或协议的网站数据。

只有域名（主域名【一级域名】和二级域名）、端口号、协议完全相同的时候，才允许通信。

# 那么，如何解决跨域问题？

* 1：动态创建script标签

　　　- 使用jQuery的ajax请求时，当参数传入的是jsonp，使用的就是这种方法

1 <script>
2     functionfuc(a){3 console.log(a.name);4 }5 </script>
6 <scriptsrc="http://api.study.com/02_jsonp.php?callback=fuc"></script>

<?phpheader('Content-Type:text/html;charset=utf-8');/*处理业务逻辑  返回数据给第三方过的的接口*/$callback = $_GET['callback'];$json = '{"name":"cxh","age":"18"}';echo $callback.'('.$json.')';  //给接收的函数一个参数，并返回到页面
?>

* 2：使用HTML5 的 postMessage

1 <iframeid="ifr"src="b.com/index.html"></iframe>
2 <scripttype="text/javascript">
3 window.onload= function() {4     varifr=document.getElementById('ifr');5     vartargetOrigin= 'http://b.com';//若写成'http://b.com/c/proxy.html'效果一样
6                                         //若写成'http://c.com'就不会执行postMessage了
7 ifr.contentWindow.postMessage('I was there!', targetOrigin);8 };9 </script>

1 <scripttype="text/javascript">
2 window.addEventListener('message',function(event){3         //通过origin属性判断消息来源地址
4         if(event.origin== 'http://a.com') {5 alert(event.data);//弹出"I was there!"
6 alert(event.source);//对a.com、index.html中window对象的引用
7                                   //但由于同源策略，这里event.source不可以访问window对象
8 }9 },false);10 </script>

* 3：jsonp

原理：前端先将一个实现定义好的函数名放给服务端，服务端接受这个函数，然后拼接 ‘（参数）’返回到浏览器。

他是一个前后端配合的结果。

但是有些网站不是公开的数据，并不知道他的已经定义好的函数名是什么

1 <scriptsrc="js/jquery.min.js"></script>
2 <script>
3 $.ajax({4 type:'get',5 url:'http://api.study.com/jquery_jsonp.php',6 dataType:'jsonp',7 success:function(data){8 console.log(data);9 }10 });11 </script>

* 4：顶级域名相同时的跨域问题，可以使用这些方式

　　（1）document.domain + iframe

"http://aaa.kuayu.com/" 中的文件可以在JavaScript中，使用top关键字访问到它的上一级元素（也就是引入他的b文件）中的元素。此时页面显示的效果是b文件中的p段落变为黄色

1 <!DOCTYPE html>
2 <htmllang="en">
3 <head>
4     <metacharset="UTF-8">
5     <title>Document</title>
6     <style>
7 body{
8 color:red;
9         }
10     </style>
11 </head>
12 <body>
13 aaaaaaaaaaa14 </body>
15 </html>
16 <script>
17 document.domain= 'kuayu.com';18 top.document.getElementsByTagName('p')[0].style.color= 'yellow';19 </script>

1 <!DOCTYPE html>
2 <htmllang="en">
3 <head>
4     <metacharset="UTF-8">
5     <title>Document</title>
6     <style>
7 body{
8 color:green;
9         }
10     </style>
11 </head>
12 <body>
13 <p>bbbbbbbbbbbb</p>
14
15  <iframesrc="http://aaa.kuayu.com/"frameborder="0"></iframe>
16
17 </body>
18 </html>
19
20 <script>
21
22 document.domain= 'kuayu.com';23 </script>

　　（2）domain.name = 顶级域名

　　（3）document.name + iframe

实现思路：给a页面添加一个全局属性name；

在b页面引入a页面，并且在iframe加载完毕之后修改他的url，是他引入一个本地的页面。

此时在b页面通过iframe.contentWindow.name获取的就是a页面的数据

1 <script>
2 variframe=document.querySelector('iframe');3 iframe.contentWindow.name= 111;4 iframe.onload= function(){5     this.src= 'c.html';6     this.onload= null;7 }8
9 setTimeout(function(){10         varname=iframe.contentWindow.name;11 alert(name);12 },200);13
14
15 </script>

1 <script>
2 window.name='a页面的数据'
3 </script>

　　（4）document.hash + iframe

　　　　hash也就是锚点

　　　　可以通过hash传递数据

1 <body>
2 <p>bbbbbbbbbbbb</p>
3
4  <iframesrc="http://aaa.kuayu.com/#name=hahaha"frameborder="0"></iframe>
5 //  此时hash值name=hahaha 可以传递到a页面，也就是在按页面可以取到b页面传递给她的值。使用这是种方式可以实现数据的跨域传递。6 </body>

　　（5）window.postMessage()

5：在服务器实现跨域的方法（反向代理）

以Apache的配置为例

1：修改Apache的配置文件#LoadModule proxy_module modules/mod_proxy.soLoadModule proxy_http_module modules/mod_proxy_http.so放开注释
2： 修改httpd-vhosts.conf文件，给自己的项目 添加两行ProxyRequests Off  开启反向代理ProxyPass /api http://api.botue.com  起一个别名

6：服务端实现反向代理（与服务器不同）

1 <?php2     header('Content-Type : application/json');3
4     $result = file_get_contents( '跨域的地址');5
6     echo $result;7 ?>

在页面使用XMLHTTPRequest发送请求，可以获取php后台返回出去的跨域的数据

7：在浏览器安装cors插件。。。

　　此方法仅适合在自己的电脑上玩。。啊哈哈哈哈

--------------------------------------------------------------------------------------------------------------

5月27日补充：

由于最近工作遇到跨域解决方案，特地回来补充一下

8：使用nginx做反向代理。

9：charles代理工具也可以实现跨域请求数据。（ubantu系统下面）charles的安装方法：http://www.cnblogs.com/summer0319/p/6904163.html

————————————————————————

当然，解决跨域问题还有其他的方法，以后学到了在补充。

以上内容仅仅用来总结记录，有不正确的地方望多指教，互相学习^_^

转载于:https://www.cnblogs.com/summer0319/p/6443462.html

前端跨域问题的解决方案相关推荐

深入理解前端跨域问题的解决方案——前端面试
深入理解前端跨域问题的解决方案--前端面试参考文章: (1)深入理解前端跨域问题的解决方案--前端面试 (2)https://www.cnblogs.com/greatluoluo/p/627346 ...
前端跨域问题及解决方案
document.domain 前端跨域问题及解决方案前端跨域问题及解决方案转载于:https://www.cnblogs.com/hideonbush/p/9775907.html
前端跨域请求及解决方案
什么是跨域请求在前端开发编码过程中,常见的HTML标签例如:a.form.img.script.link.iframe以及ajax操作都可以指向一个资源地址或者说发起一个资源请求,那么这里所说的请求 ...
前端跨域问题的几种解决方案
前端跨域问题的几种解决方案参考文章: (1)前端跨域问题的几种解决方案 (2)https://www.cnblogs.com/xinxingyu/p/6075881.html 备忘一下.
前端跨域，nginx反向代理的解决方案
前端跨域,nginx反向代理的解决方案参考文章: (1)前端跨域,nginx反向代理的解决方案 (2)https://www.cnblogs.com/Yukiyi/p/7912223.html (3 ...
关于前端跨域及解决方案详解
关于前端跨域跨域指的是一个域下的文档或脚本试图去请求另一个域下的资源.我们常说的跨域,也就是指由浏览器同源策略限制的一类请求场景. 同源指的是协议,域名和端口号相同,一旦有一个不相同,则为不同源.同 ...
node.js后端及Vue前端跨域解决方案
node.js后端及Vue前端跨域解决方案从目前我了解的情况来看,前后端跨域使用的方式有很多种,这里记录我使用最顺手的一种,即在后端使用cors跨域 node.js后端跨域解决方案先看后端的入口文 ...
9种常见的前端跨域解决方案
9种常见的前端跨域解决方案(详解) 2019.09.02 21:54 73879浏览一.什么是跨域? 在前端领域中,跨域是指浏览器允许向服务器发送跨域请求,从而克服Ajax只能同源使用的限制. ...
前端跨域问题解决方案汇总
下面我以简单的两台node服务器来说明如何使用nginx进行前端跨域访问. node1服务器在localhost:8083上启动 const app = express(); app.get('/w ...

前端跨域问题的解决方案

前端跨域问题的解决方案相关推荐

最新文章

热门文章