LiveNode.js 超简单的前端跨域、前后端分离解决方案

王一贴
• 阅读 3420

简介

LiveNode是一个基于Node.js轻巧的web服务,帮助前端开发者解决本地跨域,代码刷新,以及SPA(单页应用)前后端服务分离,并且可以用于生产环境项目部署。

Github地址

安装

全局安装livenode脚手架工具

npm install livenode-cli -g

初始化

创建项目

livenode init

根据提示输入项目文件名称(不输入则生成默认名称)

project name:

输入要创建的项目模版(不输入内容即生成多页项目模板,输入 spa 则生成单页面应用项目模版)

project templat:

cd进入生成的项目目录后,安装项目所需依赖

npm install

项目说明

src 目录为项目容器目录,html、css、js等代码放入该目录即可。(注意!不可修改src目录名称)

config.js 为服务配置文件

参数 描述
port 必填(number) 服务端口
reload (boolean) 在开发环境下是否自动刷新代码
spaHistory (boolean) 项目是否为spa(单页面应用)的history模式
notFound (string) 多页服务中404页面位置,如'/404.html'
proxyTable (array) 代理接口转发服务

FAQ

  • 当spaHistory设为true时,此时不应设置notFound参数(设置为''字符串即可),同理假如设置notFound参数后,spaHistory模式即失效。
  • reload为开发环境下的代码修改自动刷新浏览器,上线执行npm build启动服务时默认会关闭该功能。
  • proxyTable为服务转发设置,可以处理本地开发接口跨域调试,也可在线上生产环境中处理前后端分离,转发代理后端接口服务。

proxyTable

配置接口转发代理

const proxyTable = [
  {
    host: 'http://www.binlive.cn',
    api: '/api/testApi'
  }, {
    host: 'http://www.example.cn',
    api: '/example'
  }
];

host 为接口域名地址,api 为接口地址,可以配置多个接口转发。
如需代理restfull API,例如接口为http://www.binlive.cn/api/tes...http://www.binlive.cn/api/tes... 等接口,只需设置api为

{
    host: 'http://www.binlive.cn',
    api: '/api'
 }

服务命令

npm start

启动开发环境下的node.js服务(⚠️如果已经执行过一次npm start命令,需要先执行npm stop关闭服务,才可以再用 npm start启动服务,或者可以直接用npm restart 重启服务)

npm restart

重启node.js服务,在开发环境下修改config.js配置文件后需要执行该命令重启服务

npm run build

启动生产环境下的node.js服务,在生产环境下修改配置文件不需要再执行npm restart命令重启,npm run build会默认监听配置文件修改并自动重启服务。

npm stop

停止node.js服务

npm run list

查看node.js服务的状态

点赞
收藏
评论区
推荐文章
徐小夕 徐小夕
4年前
当遇到跨域开发时, 我们如何处理好前后端配置和请求库封装(koa/axios版)
我们知道很多大型项目都或多或少的采用跨域的模式开发,以达到服务和资源的解耦和高效利用.在大前端盛行的今天更为如此,前端工程师可以通过nodejs或者Nginx轻松搭建起web服务器.这个时候我们只需要请求后端服务器的接口即可实现系统的业务功能开发.这个过程中会涉及到web页面向API服务器的跨域访问(由于受到浏览器的同源策略,但是业界已有很多解决方案,
待兔 待兔
2年前
什么是跨域以及如何解决?通俗易懂带你彻底搞定
什么是跨域以及如何解决?通俗易懂带你彻底搞定现在的web项目,很多都是前后端分离,特别容易出现跨域问题那么什么是跨域问题呢?本篇文章带你彻底从本质上弄明白什么是跨域问题以及如何解决一跨域有什么现象?我们先看一下
Easter79 Easter79
3年前
springboot的跨域
https://www.cnblogs.com/520playboy/p/7306008.html1、对于前后端分离的项目来说,如果前端项目与后端项目部署在两个不同的域下,那么势必会引起跨域问题的出现。针对跨域问题,我们可能第一个想到的解决方案就是jsonp,并且以前处理跨域问题我基本也是这么处理。但是jsonp方式也同样有不足,不管是对
kenx kenx
4年前
SpringBoot 优雅配置跨域多种方式及Spring Security跨域访问配置的坑
前言最近在做项目的时候,基于前后端分离的权限管理系统,后台使用SpringSecurity作为权限控制管理,然后在前端接口访问时候涉及到跨域,但我怎么配置跨域也没有生效,这里有一个坑,在使用SpringSecurity时候单独配置,SpringBoot跨越还不行,还需要配置Security跨域才行。什么是跨域跨域是一种浏览器同源安全策略,即浏
Easter79 Easter79
3年前
springboot2之优雅处理返回值
前言最近项目组有个老项目要进行前后端分离改造,应前端同学的要求,其后端提供的返回值格式需形如{"status":0,"message":"success","data":{}}方便前端数据处理。要实现前端同学这个需求,其实也挺简单的,
Stella981 Stella981
3年前
No 'Access
跨域说明前后端分离下,跨域已是一个老生常谈的话题,但很多小伙伴还是经常面临这样的问题,且解决方案多变多样。这里介绍一种简单直接的后端解决方案。解决跨域(服务端)/CorsConfig跨域@authorylyue@since2018年11
Stella981 Stella981
3年前
Go + Gin + Vue打包成一个文件
介绍为方便部署,在开发时,可以是前后端分离的,但进行部署的时候,在某些领域前后端分离部署显得多此一举,为了让部署变得简单,所以需要考虑是否可以将前端与后端在生产时直接生成为一个文件所需工具https://github.com/gobindata/gobindatahttps://github.com/elaz
Stella981 Stella981
3年前
AJAX学习笔记(五、AJAX+JSON与Servlet前后端交互)
前后端分离实现前后端分离的好处就不用多说了,前后端那么JavaWeb项目前后端分离是怎么实现的呢?1.浏览器发送请求2.直接到达html页面(前端控制路由与渲染页面,整个项目开发的权重前移)3.html页面负责调用服务端接口产生数据(通过ajax等等,后台返回json格式数据,json数据格式因为简洁高效而取代xml)
Stella981 Stella981
3年前
Spring Boot 解决跨域问题的 3 种方案
前后端分离大势所趋,跨域问题更是老生常谈,随便用标题去google或百度一下,能搜出一大片解决方案,那么为啥又要写一遍呢,不急往下看。前后端分离大势所趋,跨域问题更是老生常谈,随便用标题去google或百度一下,能搜出一大片解决方案,那么为啥又要写一遍呢,不急往下看。问题背景:SameOriginPolicy,译为“同源策略”。它是对
Stella981 Stella981
3年前
Serverless 实战——使用 Rendertron 搭建 Headless Chrome 渲染解决方案
为什么需要Rendertron?传统的Web页面,通常是服务端渲染的,而随着SPA(SinglePageApplication)尤其是React、Vue、Angular为代表的前端框架的流行,越来越多的WebApp使用的是客户端渲染。使用客户端渲染有着诸多优势,比如节省后端资源、局部刷新、前
Velocity不用愁!Velocity系统的前端工程化之路 | 京东云技术团队
Velocity是一个基于Java的Web页面模版引擎。十多年前,Velocity将Java代码从Web页面中分离出来,使得开发者能够并行网页开发和Java开发。随着十年前后端分离的浪潮涌动,回首再面对这些基于Velocity的旧系统,无论是后端还是前端人员维护,都会存在诸多问题:
王一贴
王一贴
Lv1
一叫一回肠一断,三春三月忆三巴。
文章
4
粉丝
0
获赞
0