【前端基建】Nodejs开发dev-serve,实现proxy正向代理,解决项目本地跨域问题

前端静态资源项目可通过启本地服务的方式解决跨域的问题,因为服务端之间没有跨域请求,也可以解决必要时使用网络访问才能实现的功能,比如网页调取摄像头,微信开发授权后重定向地址必须为网络地址等。
也可以将该工具部署在支持nodejs的云服务器上跨域访问一些内容为自己的网站丰富内容

开始使用

确保自己的开发环境又nodejs和npm
查看方式

node -v
npm -v

环境满足后

初始化
npm init -y
安装必要的依赖
  • 获取项目启动时传递的参数
npm i minimist --save-dev
  • 安装代理的主要依赖
npm i http-proxy --save-dev
创建文件名为server.js
var http = require('http')
var fs = require('fs')
var path = require('path')
// 获取启动时参数,安装对应的包
var argv = require('minimist')(process.argv.slice(2));
var httpProxy = require('http-proxy');

var { log, error } = require('console');

var proxy = httpProxy.createProxyServer();

// 需要代理的目标地址
var target = 'http://192.168.1.100'
var server = http.createServer((req, res) => {
    switch (req.url.split('/')[1]) {
        case 'aaa': //根路径后的path,域名后面所有路径为aaa的都会被代理到此地址
            proxy.web(req, res, {
                target: `${target}:8080`
            }, function (e) {
                log(e)
            });
            break;
        case 'bbb':
            proxy.web(req, res, {
                target: `${target}:8081`
            }, function (e) {
                log(e)
            });
            break;
        default:
        	// 根据访问的路径找到对应的静态文件
            var fullPath = path.join(__dirname, '/src', req.url)
            try {
                var file = fs.readFileSync(fullPath, 'utf-8')
                res.end(file)
            } catch (error) {
                res.statusCode = 404
                res.end('404')
            }
            break;
    }
})
server.on('clientError', (err, socket) => {
    socket.end('HTTP/1.1 400 Bad Request\r\n\r\n');
});
var port = argv.port
server.listen(port, (err) => {
    if (err) {
        error(err);
    } else {
        log( '项目运行在:'+ '\033[42;30m http://localhost:'+port);
    }
})

项目结构

|--src
|  |--index.html
|  |--js
|     |--example1.js
|  |--css
|     |--example2.css
|--server.js
|--package.json

package.json文件中编辑自己的启动脚本--port 80 为自定义启动端口号,可自行修改
mac系统会限制非root用户使用80端口,在脚本前添加sudo或修改1024以上的端口号

  "scripts": {
    "dev": "node server.js --port 80" 
  },
使用脚本运行
npm run dev

此工具之作为单纯的网络代理工具,其中没有涉及到编译的过程不支持热更新,每次修改完静态文件以后需要手动在浏览器端进行刷新视图。
如果需要热更新请参考BrowserSync

你可能感兴趣的:(大前端,webpack,proxy,nginx反向代理,ajax跨域问题,nodejs)