注:本文主要简单介绍两个问题的解决方案 01:利用nginx部署web前端项目(windows服务器,和linux大同小异)(所谓纯前端,html+js); 02:利用nginx反向代理解决前端跨域请求后台接口问题;
01、利用nginx部署web前端项目(所谓纯前端,html+js)
首先创建一个前端项目,在这里为演示方便,我的前端项目只有一个html(test.html),直接贴代码如下:
就是这么一个简单的页面(逻辑就是一个按钮,点击会请求一个地址获取一段地址信息);
接下来按以下步骤配置安装项目和服务器即可:
一、下载并安装一个nginx服务器(就是解压一个zip包就OK,这里不再赘述),我的是解压在了D:dev ginx-1.14.0目录下
二、将刚才那个test.html随便放在一个文件夹,我的在D:projectsIdeaWorkspace est1 est.html
三、打开nginx安装目录的conf ginx.conf文件,修改server节点下主要内容如下:
四、在nginx安装目录下执行如下命令启动服务 start nginx(记得要执行这个命令,不要直接点nginx.exe启动,因为这样启动会生成一个nginx.pid在logs目录下,方便用nginx.exe -s stop命令关闭服务)
五、此时大功告成,打开浏览器访问http://localhost:90/test.html(和nginx.conf保持一致)即可访问到刚才的html页面;
02、利用nginx反向代理解决前端跨域请求后台接口问题;
接下来是利用反向代理解决跨域请求的问题了,首先我已经在另一台电脑上部署好了一个后台服务,并利用 花生壳 将地址映射成为外网可以访问的地址(即现在通过一个外网地址就可以访问到我的这个后台服务);
一、接下来我首先利用postman(一个http请求的工具,也可以用来做高并发测试(不推荐),对于这个工具不多赘述),向我的后台服务发送一个http请求,我们会得到如下返回结果,直接贴内容:
我们看到正常获取到一个json数据;
二、现在我们停掉nginx的服务,在conf ginx.conf里面刚才省略的地方追加如下内容:
这样就实现了反向代理映射;
三、重启nginx服务,然后访问刚才的html,点击按钮(注意上面的js片段,我们向刚刚追加配置的地址发送了一个请求,nginx会将该请求转发到后台服务的外网地址),你会发现你的请求成功了!
that's all~ 希望能帮助到一部分有此需求的人~