Node.js配合node-http-proxy解决本地开发ajax跨域问题


Posted in Javascript onAugust 31, 2016

情景:

前后端分离,本地前端开发调用接口会有跨域问题,一般有以下3种解决方法:

1. 后端接口打包到本地运行(缺点:每次后端更新都要去测试服下一个更新包,还要在本地搭建java运行环境,麻烦)

2. CORS跨域:后端接口在返回的时候,在header中加入'Access-Control-Allow-origin':* 之类的(有的时候后端不方便这样处理,前端就蛋疼了)

3. 用nodejs搭建本地http服务器,并且判断访问接口URL时进行转发,完美解决本地开发时候的跨域问题。

 用到的技术:

1. nodejs搭建本地http服务器

2. 应用node-http-proxy,做接口url的转发

具体方法:

1. node.js搭建本地http服务器参考了shawn.xie的《nodejs搭建本地http服务器》

2. node.js做转发使用node-http-proxy实现,官方文档:https://github.com/nodejitsu/node-http-proxy#using-https

3. 操作方法参考了:http://hao.jser.com/archive/10394/?utm_source=tuicool&utm_medium=referral

4. 下面是我自己的实战操作

项目准备

1. npm初始化

npm init

2. 安装node-http-proxy模块

npm install http-proxy --save-dev

3. 项目结构

Node.js配合node-http-proxy解决本地开发ajax跨域问题

下面的例子中,我们把html文件直接放在根目录'./',也可以指定一个网站目录,在proxy.js中可以自定义

配置HTTP服务器和PROXY转发

var PORT = 3000;
var http = require('http');
var url=require('url');
var fs=require('fs');
var mine=require('./mine').types;
var path=require('path');
var httpProxy = require('http-proxy');
var proxy = httpProxy.createProxyServer({
target: 'http://192.168.10.38:8180/', //接口地址
// 下面的设置用于https
// ssl: {
// key: fs.readFileSync('server_decrypt.key', 'utf8'),
// cert: fs.readFileSync('server.crt', 'utf8')
// },
// secure: false
});
proxy.on('error', function(err, req, res){
res.writeHead(500, {
'content-type': 'text/plain'
});
console.log(err);
res.end('Something went wrong. And we are reporting a custom error message.');
});
var server = http.createServer(function (request, response) {
var pathname = url.parse(request.url).pathname;
//var realPath = path.join("main-pages", pathname); // 指定根目录
var realPath = path.join("./", pathname);
console.log(pathname);
console.log(realPath);
var ext = path.extname(realPath);
ext = ext ? ext.slice(1) : 'unknown';
//判断如果是接口访问,则通过proxy转发
if(pathname.indexOf("mspj-mall-admin") > 0){
proxy.web(request, response);
return;
}
fs.exists(realPath, function (exists) {
if (!exists) {
response.writeHead(404, {
'Content-Type': 'text/plain'
});
response.write("This request URL " + pathname + " was not found on this server.");
response.end();
} else {
fs.readFile(realPath, "binary", function (err, file) {
if (err) {
response.writeHead(500, {
'Content-Type': 'text/plain'
});
response.end(err);
} else {
var contentType = mine[ext] || "text/plain";
response.writeHead(200, {
'Content-Type': contentType
});
response.write(file, "binary");
response.end();
}
});
}
});
});
server.listen(PORT);
console.log("Server runing at port: " + PORT + ".");

MINE.JS

这里参考shawn.xie的源码,补充了几个字体文件的mime。

exports.types = {
"css": "text/css",
"gif": "image/gif",
"html": "text/html",
"ico": "image/x-icon",
"jpeg": "image/jpeg",
"jpg": "image/jpeg",
"js": "text/javascript",
"json": "application/json",
"pdf": "application/pdf",
"png": "image/png",
"svg": "image/svg+xml",
"swf": "application/x-shockwave-flash",
"tiff": "image/tiff",
"txt": "text/plain",
"wav": "audio/x-wav",
"wma": "audio/x-ms-wma",
"wmv": "video/x-ms-wmv",
"xml": "text/xml",
"woff": "application/x-woff",
"woff2": "application/x-woff2",
"tff": "application/x-font-truetype",
"otf": "application/x-font-opentype",
"eot": "application/vnd.ms-fontobject"
};

以上就是全部源码

然后把项目中的接口地址改成http://localhost:3000/......

启动nodejs服务

启动cmd,定位到项目目录,运行

node proxy.js

访问:

http://localhost:3000/index.html

可以看到项目中调用的http://localhost:3000/..... 都会从http://192.168.10.38:8180/...... 获取数据,然后转发到本地。

这样就不存在跨域了。

以上所述是小编给大家介绍的Node.js配合node-http-proxy解决本地开发ajax跨域问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 程序编码规范
Nov 23 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
JavaScript获取URL汇总
Jun 08 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
Vue 理解之白话 getter/setter详解
Apr 16 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
微信小程序实现翻牌抽奖动画
Sep 21 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 #Javascript
基于JavaScript实现点击页面任何位置返回
Aug 31 #Javascript
jquery datatable服务端分页
Aug 31 #Javascript
关于javascript原型的修改与重写(覆盖)差别详解
Aug 31 #Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
Aug 31 #Javascript
浅谈JavaScript 覆盖原型以及更改原型
Aug 31 #Javascript
javascript 将共享属性迁移到原型中去的实现方法
Aug 31 #Javascript
You might like
MySQL授权问题总结
2007/05/06 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
在 PHP 和 Laravel 中使用 Traits的方法
2019/11/13 PHP
js导出txt示例代码
2014/01/14 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
2017/04/28 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
2019/11/12 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
2020/09/12 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
python 系统调用的实例详解
2017/07/11 Python
Python3.5实现的罗马数字转换成整数功能示例
2019/02/25 Python
python 实现在一张图中绘制一个小的子图方法
2019/07/07 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
PHP如何与mysql建立链接
2013/05/05 面试题
自考生毕业自我鉴定
2013/10/10 职场文书
护士毕业实习感言
2014/03/05 职场文书
党员廉洁自律承诺书
2014/05/26 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS