推广 热搜: page  关键词  获取  数据分析  链接  搜索  哪些  服务  小红  红书 

利用nginx部署纯前端项目并通过反向代理跨域请求后台服务器(前后台完全分离项目部署及跨域请求后台问题)

   日期:2024-11-20     作者:izped    caijiyuan   评论:0    移动:https://sicmodule.kub2b.com/mobile/news/859.html
核心提示:注:本文主要简单介绍两个问题的解决方案 01:利用nginx部署web前端项目(windows服务器,和linux大同

本文主要简单介绍两个问题的解决方案 01:利用nginx部署web前端项目(windows服务器,和linux大同小异(所谓纯前端,html+js); 02:利用nginx反向代理解决前端跨域请求后台接口问题

利用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请求,我们会得到如下返回结果,直接贴内容

利用nginx部署纯前端项目并通过反向代理跨域请求后台服务器(前后台完全分离项目部署及跨域请求后台问题)

我们看到正常获取到一个json数据

二、现在我们停掉nginx的服务,在conf ginx.conf里面刚才省略的地方追加如下内容

 

这样就实现了反向代理映射

三、重启nginx服务,然后访问刚才的html,点击按钮(注意上面的js片段,我们向刚刚追加配置的地址发送了一个请求,nginx会将该请求转发到后台服务的外网地址,你会发现你的请求成功了

that's all~ 希望能帮助到一部分有此需求的人~

本文地址:https://sicmodule.kub2b.com/news/859.html     企库往 https://sicmodule.kub2b.com/ , 查看更多

特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。

 
 
更多>同类最新资讯
0相关评论

文章列表
相关文章
最新动态
推荐图文
最新资讯
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号