跨越解决方案之nginx

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【跨越解决方案之nginx】

 

1.背景介绍

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

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

同源策略的目的，是防止黑客作一些作奸犯科的勾当。好比说，若是一个银行的一个应用容许用户上传网页，若是没有同源策略，黑客能够编写一个登录表单提交到本身的服务器上，获得一个看上去至关高大上的页面。黑客把这个页面经过邮件等发给用户，用户误认为这是某银行的主网页进行登录，就会泄露本身的用户数据。而由于浏览器的同源策略，黑客没法收到表单数据。

2.知识剖析

随着如今开发的先后端分离，咱们只须要Server端告诉咱们Api URL便可，那么这会产生一个问题：Ajax跨域。

配置nginx

listen     1008;   //监听的窗口

server_name  localhost;   #监听的地址

location /{

root   F:/WebstormProjects/skill-admin-html/branches/skill-admin-html-18.0.branch;  //根目录

index  index.html index.htm;  //设置默认页

try_files $uri $uri/ /index.html =404;

}

location /ajax/{

proxy_pass   http://120.92.4.210:10011/;  //服务器的地址

proxy_set_header            Host                            $host;

proxy_set_header            X-Real-IP                       $remote_addr;

proxy_set_header            X-Forwarded-For                 $proxy_add_x_forwarded_for;

}

3.常见问题

一、Nginx 常见错误

1.  端口占用问题

2.Nginx所在目录有中文

三、502 Bad Gateway、503 Serveice Unavailable

四、 504 Gateway Timeout

4.解决方案

一、个人配置文件里服务侦听的是 80 端口，但80端口被占用了，咱们更换端口就能够了，

二、目录是不能有中文

三、 通常缘由:后端服务没法处理，业务中断。

解决方法：从后端日志获取错误缘由，解决后端服务器问题。

四、通常缘由:后端服务器在超时时间内，未响应Nginx代理请求

解决方法：根据后端服务器实际处理状况，调正后端请求超时时间。

5.编码实战

6.扩展思考

跨域的其余解决方法

1.jsonp 须要目标服务器配合一个callback函数。

2.window.name+iframe 须要目标服务器响应window.name。

3.window.location.hash+iframe 一样须要目标服务器做处理。

4.html5的 postMessage+ifrme 这个也是须要目标服务器或者说是目标页面写一个postMessage，主要侧重于前端通信

5.CORS  须要服务器设置header ：Access-Control-Allow-Origin。

7.参考文献

"http://www.cnblogs.com/liyongsan/p/6795851.html">nginx常见问题

http://www.cnblogs.com/gabrie...l">nginx的反向代理机制解决前端跨域问题