node.js搭建代理服务器实现跨域
前后端分离,本地前端开发调用接口会有跨域问题,一般有以下3种解决方法:
- 后端接口打包到本地运行(缺点:每次后端更新都要去测试服下一个更新包,还要在本地搭建java运行环境,麻烦)
- CORS跨域:后端接口在返回的时候,在header中加入’Access-Control-Allow-origin’:* 之类的。
- 用nodejs搭建本地http服务器,并且判断访问接口URL时进行转发,完美解决本地开发时候的跨域问题。
node.js提供模块:node-http-proxy来实现http代理
源码如下:
/*** Created by zhaohuan on 2017/4/19.*/
// (function creatserver(pathurl) {var http=require('http');var fs=require('fs');var mime=require('mime');var urls=require('url');var pathurl='/Users/zhaohuan/login';//以上路径为html,css,js的路径//mark:在终端输入pwd获取路径var httpProxy = require('http-proxy');var proxy = httpProxy.createProxyServer({target: 'http://139.224.235.133:8099/', //接口地址//创建一个代理,从以上路径获取数据。
});//本地客户端请求服务器端的数据(跨域):客户端向代理服务器发起请求,
代理服务器接到请求,向目标服务器发起请求。http.createServer(function (req,res) {var url=urls.parse(req.url).pathname;//req.url:localhost:8116/index.html//url:/index.htmlvar realPath=pathurl+url;if(url.indexOf("user") > 0||url.indexOf("login") > 0){//当请求为user,login需要代理服务器请求远端服务器数据proxy.web(req, res);return;}fs.readFile(realPath,function (err,data) {if(data){res.writeHead(200,{'Content-type':mime.lookup(realPath)//获取请求文件后缀 });res.end(data);}});}).listen(8888);console.log('服务器启动');
以上是使用mime.lookup(realPath)获取的文件后缀。
对应的客户端js代码如下:
//使用ui.router实现路由机制var loginapp = angular.module('loginapp', ['ui.router']);loginapp.controller('routselect', function ($scope) {$scope.message = '配置完成';});loginapp.config(function ($stateProvider, $urlRouterProvider) {$urlRouterProvider.when('/', '/login')//默认页面.otherwise("/login");//重定向$stateProvider.state('login', {url: "/login",templateUrl: 'index1.html',controller: 'loginC'}).state('success', {url: "/success",templateUrl: 'index2.html',controller: 'loginsuccessC'});});loginapp.controller('loginC', function ($scope, $state,$http) {
//验证码(因为此页面实现的是登陆获取权限操作数据库)$scope.unicode = (function () {var codes = [];//数字for (var i = 48; i < 57; codes.push(i), i++);//大写字母for (var i = 60; i < 90; codes.push(i), i++);//小写字母for (var i = 97; i < 122; codes.push(i), i++);var arr = [];for (var i = 0; i < 4; i++) {var index = Math.floor(Math.random() * (61) + 0);var char = String.fromCharCode(codes[index]);arr.push(char);}var code = arr.join("");$scope.yzm = code;})();$scope.ajax = function (user, password, yzm) {if (yzm == $scope.yzm) {$http({method: 'GET',url: 'login',//对应的代理地址通过代理获取跨域接口http://139.224.235.133:8099/loginheaders: {"Authorization": "Basic " + btoa(user + ":" + password)},}).then(function successCallback(response) {console.log(response);$state.go('success');//页面跳转//注意:使用路由是文件名不可用中文})}else {alert('请输入正确的验证码')}}});















