内容简介:通常开发环境可以通过设置proxy解决跨域问题,而生产环境下要么把前端项目放在后端项目里,要么设置cor解决跨域问题,前者不利于前后端分离,后者需要后端配置,而现在使用nginx做启动服务设置反向代理可以很好解决跨域问题。
1.Nginx入门与基本操作篇
注:由于服务器是windows系统,所以本文主要讲解Nginx在windows下的操作。
- 首先下载 Nginx
- 解压缩,我们所有的配置基本都在万能的 nginx/conf/nginx.conf 中完成,其它文件可以不用理
- 关于nginx.conf
... #需要我们按需要修改的一般只有中间server里的代码 server { # 设置监听端口 listen 9000; server_name localhost; # 设置静态资源路径,如下设置打输入地址时会打开H盘app/dist下的index页面 location / { root H:/app/dist; index index.html; } # 报错页面,同上根据需要设置,也可不理 error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } ...
- 这样一个简单服务的配置就完成了,启动服务访问 http://localhost :9000 即可打开对应网页,如果需要启动多个服务,只需多添加server配置后重启即可。
- 几个常用的操作指令(以下指令请在nginx文件目录下使用)
# 启动nginx(我的情况是运行起来后cmd就输入不了其它指令了,需要在打开一个cmd来操作) nginx.exe # 修改nginx.conf文件后重启nginx nginx.exe -s reload # 暂停nginx服务 nginx.exe -s stop # 有时暂停服务失效,需要强制终止nginx进程 注:/f 强制执行 taskkill /im nginx.exe /f
2.反向代理解决跨域问题
通常开发环境可以通过设置proxy解决跨域问题,而生产环境下要么把前端项目放在后端项目里,要么设置cor解决跨域问题,前者不利于前后端分离,后者需要后端配置,而现在使用nginx做启动服务设置反向代理可以很好解决跨域问题。
- 还是回到万能的nginx.conf文件,添加location匹配规则实现代理转发
server { listen 9000; server_name localhost; location / { root H:/app/dist; index index.html; } #设置代理转发 location /api/ { proxy_pass http://localhost:9600/; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } }
- 通过上面的设置,在重启服务,可以让页面中所有包含 /api/ 字段的请求都转为由服务器去向 http://localhost :9600/地址发送请求,从而巧妙的解决了浏览器的跨域问题。
- 怎么样,是不是很简单,快动手配置是试试吧(^_^)~
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- mongoDB入门——环境配置
- django入门一(搭建开发环境)
- jedis使用入门(Docker环境下)
- webpack入门(2) - 安装,配置,环境搭建
- 木兰重生:交互环境复现,新添新手入门
- Flink从入门到放弃(入门篇2)-本地环境搭建&构建第一个Flink应用
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
高性能HTML5
Jay Bryant、Mike Jones / 奇舞团 / 电子工业出版社 / 2014-5
《高性能html5》为读者讲解了如何用html5 从一开始就设计一个高性能的网站,以及如何对已有网站进行改良,使得它们具备优越的性能。《高性能html5》中总结了许多实践经验、关键技巧,并提供了丰富的示例,作者有意无意地将软件工程以及前端开发技术之道隐藏于朴实的描述中。 通过学习《高性能html5》,读者能够掌握如何创建自己的高性能网站。《高性能html5》适合于想创建自己网站的初学者,同样......一起来看看 《高性能HTML5》 这本书的介绍吧!