注:本文主要简单介绍两个问题的解决方案 01:利用nginx部署web前端项目(windows服务器,和linux大同小异)(所谓纯前端,html+js); 02:利用nginx反向代理解决前端跨域请求后台接口问题;
01、利用nginx部署web前端项目(所谓纯前端,html+js)
首先创建一个前端项目,在这里为演示方便,我的前端项目只有一个html(test.html),直接贴代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 引入jquery -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>Title</title>
</head>
<body>
<button οnclick="getTextInfo()">你点我啊</button>
<p id="text">什么都看不到哦</p>
</body>
<!-- 一小段js -->
<script>
function getTextInfo () {
$.ajax({ url: "/XXXXXXXX/address/getAddress",
type:"POST",
data: {
data:'{"userName":"123456"}'
},
success: function(result){
$("#text").html(result.data.address);
}
});
}
</script>
</html>
就是这么一个简单的页面(逻辑就是一个按钮,点击会请求一个地址获取一段地址信息);
接下来按以下步骤配置安装项目和服务器即可:
一、下载并安装一个nginx服务器(就是解压一个zip包就OK,这里不再赘述),我的是解压在了D:\dev\nginx-1.14.0目录下
二、将刚才那个test.html随便放在一个文件夹,我的在D:\projects\IdeaWorkspace\test1\test.html
三、打开nginx安装目录的\conf\nginx.conf文件,修改server节点下主要内容如下:
server {
listen 90;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root D:/projects/IdeaWorkspace/test1;
index test.html;
} ...... 省略
四、在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\nginx.conf里面刚才省略的地方追加如下内容:
location /XXXXXXXX {
proxy_pass http://接口服务地址:端口号/XXXXXXXX;
}
这样就实现了反向代理映射;
三、重启nginx服务,然后访问刚才的html,点击按钮(注意上面的js片段,我们向刚刚追加配置的地址发送了一个请求,nginx会将该请求转发到后台服务的外网地址),你会发现你的请求成功了!
that's all~ 希望能帮助到一部分有此需求的人~