node.js搭建代理服務器實現跨域

node.js搭建代理服務器實現跨域

---

前後端分離，本地前端開發調用接口會有跨域問題，一般有以下3種解決方法：

1. 後端接口打包到本地運行（缺點：每次後端更新都要去測試服下一個更新包，還要在本地搭建java運行環境，麻煩）
2. CORS跨域：後端接口在返回的時候，在header中加入’Access-Control-Allow-origin’:* 之類的。
3. 用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.html
        var 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/login
                    headers: {
                        "Authorization": "Basic " + btoa(user + ":" + password)
                    },
                }).then(function successCallback(response) {
                    console.log(response);
                    $state.go('success');／／頁面跳轉
                    //注意：使用路由是文件名不可用中文
                })
            }
            else {
                alert('請輸入正確的驗證碼')
            }
        }
    });