Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

针对老项目, 创建本地服务代理(解决跨域),支持热更新 #3

Open
gauseen opened this issue Sep 14, 2018 · 0 comments
Assignees
Labels
node nodejs proxy 代理

Comments

@gauseen
Copy link
Owner

gauseen commented Sep 14, 2018

特别针对老型项目设计,没有使用构建工具( webpack、gulp、grunt etc.)

确保你的 nodejs 版本 >= 8.0.0,
解决跨域问题,支持本地开发热更新


安装(install)

yarn add @gauseen/web-proxy -D    # 推荐
# or
npm i @gauseen/web-proxy -D

使用(usage)

// 首先,在项目根目录创建 server.js 文件
// 例子:
// server.js

const path = require('path')
const server = require('@gauseen/web-proxy')

const options = {
	watch: false,
	watchStatic: path.join(__dirname, './demo/'),
	serverStatic: path.join(__dirname, './'),
	port: 8008,
	proxyTable: {
		'/api': { target: 'http://doman.com/', }
		/* '/apiFlag': {
			target: 'http://doman.com/',
			pathRewrite: {
				// ^/old-path' : '/new-path
				// 下面配置是将,/apiFlag 开头的请求,重写为 /newFlag,也可为 '' (空)
				'^/apiFlag': '/newFlag',
			}
		} */
	},
	notify: true,
	ignores: ['js'],
	callback: function () {
		console.log('Server run success ...')
	},
}

server(options)

options 参数说明:

参数 说明 类型 默认 是否必选 可选项
watch 是否开启热更新 Boolean false -
watchStatic 热更新目录 String -
serverStatic 静态服务目录 String -
proxyTable 要代理的 doman Object -
port 端口 Number 8008 -
notify 是否在浏览器端显示通知 Boolean false -
ignores 忽略 watch 文件格式 Array - [css, html, js]
callback 服务启动成功回调 Function - -

启动服务

node server.js
#
# 自己配置 npm scripts 运行

# 更改 server.js 文件后要重启服务,更改才生效

浏览器运行

localhost: <port>/

注:

proxyTable 是个对象,

键 为: 请求 URL 的统一标识字段,如请求接口:http://doman/api/back/login,那么 api 就是它的标识字段

值 为: {
	target: 要代理的(域名或IP) doman, # (必填)
	pathRewrite: { '^/oldFlag': '/newFlag', } # (非必填)
}

pathRewrite 字段作用是防止后端接口比较混乱,没有统一的标识符,
这时前端在本地开发时,可以自己添加一个统一标识符,并使用 pathRewrite 的功能,再让这个字段设置为空字符,这样就可以请求到服务端本来的 URL

项目地址

欢迎 star ⭐ ⭐ ⭐ ⭐ ⭐

@gauseen gauseen added node nodejs proxy 代理 labels Sep 19, 2018
@gauseen gauseen self-assigned this Oct 18, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
node nodejs proxy 代理
Projects
None yet
Development

No branches or pull requests

1 participant