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 相关文章推荐
js利用div背景,做一个竖线的效果。
Nov 22 Javascript
javascript 按回车键相应按钮提交事件
Nov 02 Javascript
基于jquery的鼠标拖动效果代码
May 30 Javascript
javascript prototype原型详解(比较基础)
Dec 26 Javascript
vue2.0中goods选购栏滚动算法的实现代码
May 17 Javascript
详解React中的组件通信问题
Jul 31 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
详解如何在vue-cli中使用vuex
Aug 07 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
Aug 26 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 Javascript
javascript实现京东登录显示隐藏密码
Aug 02 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
使用dump函数,给php加断点测试
2013/06/25 PHP
javascript 随机展示头像实现代码
2011/12/06 Javascript
jQuery拖拽 & 弹出层 介绍与示例
2013/12/27 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
jquery实现搜索框常见效果的方法
2015/01/22 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
javascript获取以及设置光标位置
2017/02/16 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
Angular模板表单校验方法详解
2017/08/11 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
python常见的格式化输出小结
2016/12/15 Python
详解python3实现的web端json通信协议
2016/12/29 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
python实现网站微信登录的示例代码
2019/09/18 Python
Python函数式编程实例详解
2020/01/17 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
中软国际Java程序员笔试题
2014/07/19 面试题
学年自我鉴定范文
2013/10/01 职场文书
纪念建党演讲稿范文
2014/01/13 职场文书
综治维稳工作汇报
2014/10/27 职场文书
音乐会主持人开场白
2015/05/28 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书
党员公开承诺书(2016最新版)
2016/03/24 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
python区块链实现简版工作量证明
2022/05/25 Python