建站服务搭建的页面时,文明网站建设工作进度表,电商网站建设实验原理,福州公司网站这里是修真院前端小课堂#xff0c;每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能#xff0c;本篇分享的是#xff1a; 【跨越解决方案之nginx】 1.背景介绍 跨域#x… 这里是修真院前端小课堂每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能本篇分享的是 【跨越解决方案之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.常见问题 1、Nginx 常见错误 端口占用问题2.Nginx所在目录有中文 3、502 Bad Gateway、503 Serveice Unavailable 4、 504 Gateway Timeout 4.解决方案 1、我的配置文件里服务侦听的是 80 端口但80端口被占用了我们更换端口就可以了 2、目录是不能有中文 3、 一般原因:后端服务无法处理业务中断。 解决方法从后端日志获取错误原因解决后端服务器问题。 4、一般原因:后端服务器在超时时间内未响应Nginx代理请求 解决方法根据后端服务器实际处理情况调正后端请求超时时间。 5.编码实战 6.扩展思考 跨域的其他解决方法 1.jsonp 需要目标服务器配合一个callback函数。 2.window.nameiframe 需要目标服务器响应window.name。 3.window.location.hashiframe 同样需要目标服务器作处理。 4.html5的 postMessageifrme 这个也是需要目标服务器或者说是目标页面写一个postMessage主要侧重于前端通讯 5.CORS 需要服务器设置header Access-Control-Allow-Origin。 7.参考文献 http://www.cnblogs.com/liyongsan/p/6795851.htmlnginx常见问题 http://www.cnblogs.com/gabrie...lnginx的反向代理机制解决前端跨域问题
