目录 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文件中以下代码 server { listen 80;#监听端口 server_name localhost;#域名 index index.html index.htm index.php; root E/web;#站点目录（将html等文件放置在这个文件夹） } 经过以上修改，重启nginx后通过设置的域名localhost就可以访问本地网页了，如访问文件夹E/web下的tset.html文件，则在地址栏输入：localhost/test.html，或者通过本地ip访问：如： 192.168.1.103/test.html nginx也可以自己设置域名访问，修改配置中以下代码 server { listen 80;#监听端口 server_name local.testpage.com;//修改这里的域名 index index.html index.htm index.php; root E/web;#站点目录（将html等文件放置在这个文件夹） } 修改系统hosts文件，windows在C:\Windows\System32\drivers\etc下，文本编辑器打开，修改： # Localhost (DO NOT REMOVE) 127.0.0.1 localhost 127.0.0.1 local.testpage.com//这里添加设置的域名 重启nginx,访问local.testpage.com就可以访问到E:/web下的index.html 2、nginx跨域可以通过反向代理来实现： 如我想访问地址http://115.29.203.53:10013的数据，那么可以这么配置：在server里添加location server { location /student-ajax/ { proxy_pass http://115.29.203.53:10013;} } 重启nginx，要跨域时，url参数填写/student-ajax/代替目标 http://115.29.203.53:10013; 六.更多讨论 哪种跨域方式相对更好？ Jsonp 优点：兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。 缺点：只能GET；不能查错；不同域的两个页面不能进行进行JavaScript调用 CORS 解决了Jsonp，但是不兼容旧浏览器 window.name 和 postMessage 偏重前端通信 Nginx 优点：没有限制，功能强大，甚至不需要目标服务器同意，侵略性很强 缺点：需要设置代理服务器 七.参考文献 参考一：跨域请求 - JSONP获取JSON数据 http://justcoding.iteye.com/blog/1366102AJAX 参考二：深入理解前端跨域方法和原理 http://blog.csdn.net/kongjiea/article/details/44201021 参考三：Nginx反向代理、CORS、JSONP等跨域请求解决方法总结 http://www.cnblogs.com/tianheila/p/6139241.html PPT地址： https://ptteng.github.io/PPT/PPT/JS-TASK5-NginxJSONPXHR.html#/ 文档地址： http://www.jnshu.com/daily/21601?uid=9602 视频： |
注册
登录