故事开端(前因)
一、前期准备
知识-如果不考虑了解可忽略该部分
- nat123的使用技巧(内网网站发布到外网-五种方法-内网环境,无公网IP-80端口)
- nginx的代理技巧(http-proxy)
- 本地访问和外网访问联系和区别
- Asp.Net WebApi的简单使用
- 前端html以及ajax的使用
工具-案例资源
- nat123 windows版本 下载链接 http://www.nat123.com/Pages_2_32.jsp
- nginx windows版本 nginx-1.13.12 下载链接 http://nginx.org/en/download.html
- 后端网站案例-VS2015开发 +前端网站案例-Html+js(ajax相关js文件) 下载地址 https://pan.baidu.com/s/1WAhv4WKXExGcEJsl3XdVow 密码: 1unv
二、操作实践
前端和后端网站的案例
Index.html代码如下:
<html>
<head>
<script src="/js/jquery.js"></script>
</head>
<body>
<span id='msg'>this is my web !</span>
<input id='btn' onclick='GetData()' type='button' value='getData'/>
</body>
<script type="text/javascript">
function GetData()
{
$.ajax({
url:"http://localhost:8090/api/product/getproducts",
type:"json",
method:"get",
success:function(data)
{
$("#msg").html(data);
}
});
}
</script>
</html>
Js文件夹中为当前需要使用的ajax需要的jquery脚本
点击获取数据按钮getData出现如下异常(普通情况下浏览不允许ajax跨域)于是乎nginx派上用场了,需要处理的是将当前数据接口的请求进行一次转发,获取到的数据再返回给前端
配置Nginx
此时使用nginx(此处nginx的安装和基本操作不做介绍,有兴趣的可以自行百度),对nginx进行如下配置(confg文件夹下的nginx.conf),实现代理,需要注意的是当前前端端口号为9898,后端端口号为8090,nginx配置文件中,主要使用的是http节点下的upstream和server中的location,#为行注释符号。
http节点下
.......................略
http{
#内部前端网站转发规则名称
upstream myweb
{
#前端网站在IIS上的网址
server 127.0.0.1:9898;
}
#内部后端api网站转发规则名称
upstream webapi
{
#api网站在IIS上的网址
server 127.0.0.1:8090;
}
.......................略
}
Server节点下
http {
.........略
server {
listen 9999;#nginx监听端口-同时也是计划内网穿透的端口
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
#默认location注释掉
#location / {
# root html;
# index index.html index.htm;
#}
#默认转发的请求-转发给前端网站-前端网站为localhost:9898
location /{
proxy_pass http://myweb;
}
#匹配请求中含有/api/-转发给后端网站-后端网站为localhost:8090
location /api/{
proxy_pass http://webapi;
}
.......................略
}
以管理员权限启动cmd,然后切换路径到nginx解压(安装)路径,此处楼主为D:\Program Files\nginx-1.13.12,启动nginx
运行后,可查看任务管理器中是否存在nginx相关的进程
然后在浏览器中输入localhost:9999,进行测试,若如下结果,则前端页面成功实现转发。
点击获取getdata按钮,结果通过浏览器断点,可以发现能够通过ajax正常访问
配置Nat123
本地测试成功了,然后就可以将当前9999端口通过nat123进行公开了(本机防火墙为该端口建立入站规则或者关闭防火墙便于远程端口访问),nat123我在使用过程中,使用的是外网80端口,这样显得自己假专业一些,看着逼格高点儿,配置如下:
三、测试效果
测试效果
在浏览器中输入对应的域名进行访问,则实现外网访问了,这样就算是圆满的成功了
四、测试分析
处理ajax跨域的基本思路
Nginx与nat123在此处扮演的角色
作为前后端分离的简单方式这样的核心思想是否能够运用到实际的开发中
五、问题总结
所思
对于nginx的使用始终感觉有些大材小用,可能是个人能力目前有限,暂时这样的操作能够个人测试使用,相对于前后端简单分离的方式,这样还是能够达到效果的,但是配置还是相对复杂,后续通过了解IIS使用特点,可能会将Nginx排除,使用IIS的请求转发去实现类似于Nginx的代理功能,这些都是后话,这是作为一个初学者的个人总结,可能该篇博客的适合的人群范围小,当时我觉得还是有必要和广大的博友们分析的,这也是一种记录成长的方式吧!