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

Big power

已于 2022-05-11 16:53:54 修改

阅读量1.3k

点赞数

分类专栏：大前端文章标签： webpack proxy nginx反向代理 ajax跨域问题 nodejs

于 2021-07-18 22:47:49 首次发布

本文链接：https://blog.csdn.net/weixin_40289389/article/details/118884075

版权

大前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前端静态资源项目可通过启本地服务的方式解决跨域的问题，因为服务端之间没有跨域请求，也可以解决必要时使用网络访问才能实现的功能，比如网页调取摄像头，微信开发授权后重定向地址必须为网络地址等。
也可以将该工具部署在支持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('<!DOCTYPE html><html><body>404</body></html>')
            }
            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

Big power

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【前端基建】Nodejs开发dev-serve，实现proxy正向代理，解决项目本地跨域问题

前端静态资源项目可通过启服务的方式决绝跨域的问题，也可以解决必要时使用网络访问才能实现的功能，比如网页调取摄像头，微信开发授权后重定向地址必须为网络地址等。
复制链接

扫一扫