这里有新鲜出炉的 7 天学会 Node.js,程序狗速度看过来!
Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台, 用来方便地搭建快速的 易于扩展的网络应用 · Node.js 借助事件驱动, 非阻塞 I/O 模型变得轻量和高效, 非常适合 运行在分布式设备 的 数据密集型 的实时应用
这篇文章主要介绍了 Node.js 配合 node-http-proxy 解决本地开发 ajax 跨域问题, 非常不错,具有参考借鉴价值,需要的朋友可以参考下
情景:
前后端分离,本地前端开发调用接口会有跨域问题,一般有以下 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. 项目结构
下面的例子中,我们把 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 跨域问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0623/332214.html