使用node的express框架,利用内网穿透实现不需要服务器,让别人访问自己的一个项目

原创已于 2022-05-08 21:26:31 修改 · 3.5k 阅读

45 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #服务器 #javascript

于 2021-12-22 09:01:35 首次发布

本文介绍如何通过Node服务器部署Vue项目，并解决跨域问题及使用natapp实现内网穿透的方法。

首先强调几个遇到的问题

直接打开 vue 打包后的 dist 文件夹里的 index.html 是无法正常访问的,因为资源的路径会发生问题
跨域问题
使用 node 开放资源目录
natapp 连接隧道失败
以下步骤要配置node环境

过程

首先将 vue 项目打包, 生成dist文件夹
在这里插入图片描述
直接把 dist 文件夹放到 node 服务器与 app.js 同级目录

此时我们进入 app.js

const express = require('express')
const app = express();

// 设置允许跨域访问该服务
app.all("*",function(req,res,next){
  //设置允许跨域的域名，*代表允许任意域名跨域
  res.header("Access-Control-Allow-Origin","*");
  //允许的header类型
  res.header("Access-Control-Allow-Headers","content-type");
  //跨域允许的请求方式
  res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
  if (req.method.toLowerCase() == 'options') {
    res.send(200);
  }  //让options尝试请求快速结束
  else {
    next();
  }
})

// 开放服务器 dist 目录,访问时会自动寻找index.html文件
app.use(express.static('dist'))

// 端口
app.listen(3000,function () {
  console.log("// -----------------------------------------------------------------------")
  console.log("port 3000 is listening")
});

在当前项目的server目录, 命令行运行

node app.js

此时的网页仅仅是可以在本地访问, 但是使用了内网穿透技术, 我们可以使得别人直接访问到我们本地的项目, 不需要部署服务器, 对于用于测试和买不起服务器的我表示很香

好的,下面演示

首先需要进入 natapp 的官网官网链接

然后选择注册或者登录, 需要实名认证
在这里插入图片描述
注册完毕后看那个免费隧道, 真的不错

在配置隧道的时候, 需要注意的是, 我node服务器使用的端口号是 3000
这里也需要填写 3000

and, 写到这里的时候, 我突然想起来还要安装下载 natapp, 但是很简单, 不要慌
在这里插入图片描述
然后直接安装就可以了

在这里插入图片描述
在 config.ini 需要配置一下

#将本文件放置于natapp同级目录 程序将读取 [default] 段
#在命令行参数模式如 natapp -authtoken=xxx 等相同参数将会覆盖掉此配置
#命令行参数 -config= 可以指定任意config.ini文件
[default]
authtoken=你自己的隧道authtoken,可以在natapp官网里的我的隧道查看               #对应一条隧道的authtoken
clienttoken=                    #对应客户端的clienttoken,将会忽略authtoken,若无请留空,
log=none                        #log 日志文件,可指定本地文件, none=不做记录,stdout=直接屏幕输出 ,默认为none
loglevel=ERROR                  #日志等级 DEBUG, INFO, WARNING, ERROR 默认为 DEBUG
http_proxy=                     #代理设置 如 http://10.123.10.10:3128 非代理上网用户请务必留空