使用http代理服务器解决本地客户端页面的跨域AJAX问题

最新推荐文章于 2022-10-16 16:16:47 发布

转载最新推荐文章于 2022-10-16 16:16:47 发布 · 151 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhengwenwei/archive/2012/11/09/2762665.html

文章标签：

#java #javascript #ViewUI

本文介绍了一种通过在客户端设置HTTP服务器来解决HTML页面跨域请求问题的方法。利用Node.js搭建本地服务器并配置路由，实现对特定URL的代理转发，同时支持直接处理本地资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

情景是这样的，一个客户端，界面基于html开发，这样的页面就没有办法在java脚本中使用ajax向服务器发请求。为了解决这个问题，可以在客户端架设一个http服务器，并注册路由，某些url只需要本地服务器处理，而某些url则转发给服务器（或者都给双方一个通知）。

演示的页面：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>world</title>
    </head>
    <body>
        <div>
            <p>local image:</p>
            <img src="logo_g3_not_proxy.png"></img>
        </div>
        <div>
            <p>remote image:</p>
            <img src="/logo_g3.png"></img>
        </div>
        <div>
            <p id="responseText"></p>
        </div>
        <p id="message"></p>
        <div>
            <p id="messageStatus"></p>
            <p id="messageText"></p>
        </div>
        <p id="text"></p>
    <script src="js/jquery.js"></script>
    <script>
        $(function($) {
            var request = new XMLHttpRequest();
            var url = "/sunshine.txt";
            request.open("GET", url, false);
            request.send();
            if(request.status = 200) {
                $("#responseText").text("XMLHttpRequest rsp: " + request.responseText);
            }
            else {
                $("#responseText").text("XMLHttpRequest error");
            }
        });
        function showMessage(message) {
            $("#message").text("JSONP message: " + message);
        }
    </script>
    <!-- JSONP -->
    <script src="/js/helloMessage.js"></script>
    </body>
</html>

本地http服务器，基于node.js，配置node-static模块：

var url = require("url");
var http = require("http");
var static = require("node-static");
var router = require("./router.js");

var port = 7000;
var website = "..";
var argv = process.argv;
if(argv.length > 2) {
    port = parseInt(argv[2]);
    if(argv.length > 3) {
        website = argv[3];
    }
}

function httpProxy(urlObj, request, response, host, port) {
    var temp = url.parse(request.url, true);
    var opt = {};
    opt.host = host;
    opt.port = port;
    opt.method = request.method;
    opt.path = urlObj.path;
    //TODO copy headers will casue exception
    var req = http.request(opt, function (res) {
        res.on("data", function (chunk) {
            response.write(chunk);
        });
        res.on("end", function () {
            response.end();
        });
    });
    req.end();
}

//
// Create a node-static server instance to serve the './public' folder
//
var file = new(static.Server)(website);

require('http').createServer(function (request, response) {
    request.addListener('end', function () {
        var urlObj = url.parse(request.url, true);
        var routeResult = router.route(urlObj.path);
        if(!routeResult) {
            file.serve(request, response);
        }
        else {
            httpProxy(urlObj, request, response, routeResult.host, routeResult.port);
            if(routeResult.method == "both") {
                file.serve(request, response);
            }
        }
    });
}).listen(port);

console.log("server running at " + port + " under " + website);

注册路由：

exports.route = function(path) {
    console.log("routing path: " + path);if(path.match(/^\/local*/)) {
        console.log("it's local");
        return null;
    }
    else {
        console.log("proxying");
        return {
            host: "localhost",
            port: "7000",
            method: "proxy" //send request to server only
            //"both": send request to both me and the server
        };
    }
};