前端常用的跨域方式

背景介绍

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。
所谓同源是指，域名，协议，端口相同。浏览器执行javascript脚本时，会检查这个脚本属于那个页面，如果不是同源页面，就不会被执行

http://www.example.com/dir2/other.html：同源http://example.com/dir/other.html：不同源（域名不同）http://v2.www.example.com/dir/other.html：不同源（域名不同）http://www.example.com:81/dir/other.html：不同源（端口不同）

知识剖析

Nginx 是一个高性能的 HTTP 和反向代理服务器，是一款轻量级的 Web 服务器，可以实现负载均衡等功能，国内使用 Nginx 服务器的大型网站主要有新浪、网易、腾讯等。

1. 静态HTTP服务器：Nginx是一个HTTP服务器，可以将服务器上的静态文件（如HTML、图片）通过HTTP协议展现给客户端
2. 反向代理服务器：客户端本来可以直接通过HTTP协议访问某网站应用服务器，网站管理员可以在中间加上一个Nginx，客户端请求Nginx，Nginx请求应用服务器，然后将结果返回给客户端，此时Nginx就是反向代理服务器。
3. 负载均衡:当网站访问量非常大，一台服务器已经不够用了。于是将同一个应用部署在多台服务器上，将大量用户的请求分配给多台机器处理。Nginx可以通过反向代理来实现负载均衡。

常见问题

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

server
    {
    listen 80;#监听端口
    server_name localhost;#域名
    index index.html index.htm index.php;
    root C:\Users\47239\WebstormProjects\js5;#站点目录（将html等文件放置在这个文件夹）
 }

经过以上修改，重启nginx后通过设置的域名localhost就可以访问本地网页了。

2. 如何配置实现跨域
3. 如我想访问地址http://dev.admin.carrots.ptteng.com/; 的数据，那么可以这么配置：在server里添加location 服务器nginx设置为：

location /a/{ 
proxy_pass http://dev.admin.carrots.ptteng.com/; 
}

重启nginx，要跨域时，url参数填写/a/代替目标;

编码实战

见视频

拓展思考

还有什么其他的跨域方式？

1. JSONP：JSONP 的理念就是，我和服务端约定好一个函数名，当我请求文件的时候，服务端返回一段 JavaScript。这段 JavaScript 调用了我们约定好的函数，并且将数据当做参数传入，JSON 的数据格式和 JavaScript 语言里对象的格式正好相同。所以在我们约定的函数里面可以直接使用这个对象。

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

3. CORS：在服务器端通过检查请求头部的origin，从而决定请求应该成功还是失败。具体的方法是在服务端设置Response Header响应头中的Access-Control-Allow-Origin为对应的域名，实现了CORS（跨域资源共享），这里出于在安全性方面的考虑就是尽量不要用 *，但对于一些不重要的数据则随意

参考文献

js中几种实用的跨域方法原理详解（http://www.cnblogs.com/2050/p/3191744.html） 

视频地址https://v.qq.com/x/page/b0395ysku9z.html 

ppt地址https://ptteng.github.io/PPT/PPT/JS-task5-kuayufangshi.html