今日完成：

完成了任务十，开始调试css样式文件及之前任务的细节。下午准备与讲了小课堂。

明日计划：

完成之前的任务并提交，有时间的话开始任务十一。

前端垮域问题有哪些常用的解决方式？

小课堂【成都第94期】 

分享人：何华飒

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.更多讨论

7.参考文献

            一.背景介绍

            跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

            所谓同源是指，域名，协议，端口相同。浏览器执行javascript脚本时，会检查这个脚本属于那个页面，如果不是同源页面，就不会被执行

            二.知识剖析

            1、静态HTTP服务器：Nginx是一个HTTP服务器，可以将服务器上的静态文件（如HTML、图片）通过HTTP协议展现给客户端

            2、反向代理服务器：客户端本来可以直接通过HTTP协议访问某网站应用服务器，网站管理员可以在中间加上一个Nginx，客户端请求Nginx，Nginx请求应用服务器，然后将结果返回给客户端，此时Nginx就是反向代理服务器。

            3、负载均衡:当网站访问量非常大，一台服务器已经不够用了。于是将同一个应用部署在多台服务器上，将大量用户的请求分配给多台机器处理。Nginx可以通过反向代理来实现负载均衡。

            4、虚拟主机:例如将www.aaa.com和www.bbb.com两个网站部署在同一台服务器上，两个域名解析到同一个IP地址，但是用户通过两个域名却可以打开两个完全不同的网站，互相不影响，就像访问两个服务器一样，所以叫两个虚拟主机。

            三.常见问题

            常见的几种跨域解决方案

            四.解决方案

            常见跨域方式

            1.使用iFrame访问另一个域。 然后再从另一个页面读取iFrame的内容。包含jquery在内的库都有一些封装。据说Firefox等可能不支持读取另一个iFrame的内容。 

            2.window.name 和 postMessage

                 window.name 和 postMessage 主要都侧重于纯前端页面之间的数据通讯，前者利用了 “ 在同一浏览器窗口载入的不同页面（ 无论它们是否不同域 ），共享同一个window.name，并且都对 window.name 有读写的权限 ” 的这一特性来实现页面间的数据交换，后者则是HTML5的API，不同域下的页面在满足一定关系的条件下可以通过此API跨域传送数据。

                3.通过jsonp跨域

                动态script标签+回调函数

                script标签是不受同源策略限制的，可以直接通过动态构造script标签实现跨域。jsonp在此基础上增加了回调函数，功能更强大

                首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时，服务器先生成 json 数据。

                然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.最后将 json 数据直接以入参的方式，

                放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。客户端浏览器，解析script标签，并执行返回的 javascript 文档，

                此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）

                4.Cors跨域资源共享。

                Cors是jsonp方法的“改进版”，避免了jsonp的一些缺点。

                具体的方法是在服务端设置Response Header响应头中的Access-Control-Allow-Origin为对应的域名，

                    实现了CORS（跨域资源共享）。cors对于IE8以下的浏览器是不支持的。

            5.服务器代理（服务端之间的资源请求不会有跨域限制）

            五.编码实战

                1、如何配置Nginx通过域名访问本地网页

                Nginx很强大，通过nginx访问本地网页，只需修改nginx目录下conf/nginx.conf文件中以下代码

            <code>

                server

                {

                listen 80;#监听端口

                server_name localhost;#域名

                index index.html index.htm index.php;

                root E/web;#站点目录（将html等文件放置在这个文件夹）

                } </code>

                 </pre>

                经过以上修改，重启nginx后通过设置的域名localhost就可以访问本地网页了，如访问文件夹E/web下的tset.html文件，则在地址栏输入：localhost/test.html，或者通过本地ip访问：如：

                    192.168.1.103/test.html

                nginx也可以自己设置域名访问，修改配置中以下代码

                  <code>

                     server

                     {

                     listen 80;#监听端口

                     server_name local.testpage.com;//修改这里的域名

                     index index.html index.htm index.php;

                     root E/web;#站点目录（将html等文件放置在这个文件夹）

                     }

                 </code>  </pre>

                修改系统hosts文件，windows在C:\Windows\System32\drivers\etc下，文本编辑器打开，修改：

             <code>

              # Localhost (DO NOT REMOVE)

              127.0.0.1 localhost

              127.0.0.1 local.testpage.com//这里添加设置的域名

          </code>   </pre>

                重启nginx,访问local.testpage.com就可以访问到E:/web下的index.html

                2、nginx跨域可以通过反向代理来实现：

                如我想访问地址http://115.29.203.53:10013的数据，那么可以这么配置：在server里添加location

               <code>

                   server

                   {

                   location /student-ajax/ {

                   proxy_pass http://115.29.203.53:10013;}

                   }

               </code> </pre>

                重启nginx，要跨域时，url参数填写/student-ajax/代替目标 http://115.29.203.53:10013;

            六.更多讨论

             哪种方式相对更好？ 

                Jsonp

            优点：兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。

            缺点：只能GET；不能查错；不同域的两个页面不能进行进行JavaScript调用 

                CORS

            解决了Jsonp，但是不兼容旧浏览器 

                window.name 和 postMessage 

            偏重前端通信 

                 Nginx

            优点：没有限制，功能强大，甚至不需要目标服务器同意，侵略性很强

            缺点：需要设置代理服务器 

            七.参考文献

            参考一：AJAX 跨域请求 - JSONP获取JSON数据

            参考二：深入理解前端跨域方法和原理

            参考三：Nginx反向代理、CORS、JSONP等跨域请求解决方法总结