在處理前後台溝通時,之前是使用 RESTful API,某些前後台共同功能會需要兩次開發或是開成 RESTful API 由後台統一處理。為解決這個問題,所以決定導入 RPC 來達到跨語言呼叫,此修改也將為我們後台功能模組化帶來便利性。由於我們的前台用 Javascript 後台是 Go,一導入 thrith 就面臨  CORS 的問題,但目 thrift 只有 nodejs有針對 CORS 已經有 solution,不過以 node.js 而言可直接將靜態網頁掛在上面,也就不會有 CORS 的問題。下面和大家分享一種是將靜態網頁直接掛在 RPC Server,另一種是將 html和 RPC Server 分開,要如何加上 CORS 參數。

  •  將靜態網頁掛在 RPC Server
server side:
var thrift = require('thrift'); 
var RpcService = require('./gen-nodejs/RpcService'); 
var ttypes = require('./gen-nodejs/RpcService_types'); 
var map_handler = {
 MapSnapToRoad: function(path, result) {
 console.log("MapSnapToRoad()");
 result(null, path);
 }
};

var map_svc_opt = {
 transport: thrift.TBufferedTransport,
 protocol: thrift.TJSONProtocol,
 processor: RpcService,
 handler: map_handler
 };

var server_opt = {
 files: ".",
 services: {
 "/map": map_svc_opt
 }
 }

var RPCserver = thrift.createWebServer(server_opt);
var port = 3000;
RPCserver.listen(port);
client side:
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <title>Hello Thrift</title>
 </head>
 <body>
 Name: <input type="text" id="name_in">
 <input type="button" id="get_msg" value="Get Message" >
<div id="output"></div>

 <script src="./public/gen-js/thrift.js"></script>
 <script src="./public/gen-js/RpcService.js"></script>
 <script>
 
 (function() {
 var transport = new Thrift.TXHRTransport("/map");
 var protocol = new Thrift.TJSONProtocol(transport);
 var client = new RpcServiceClient(protocol);
 var nameElement = document.getElementById("name_in");
 var outputElement = document.getElementById("output");
 document.getElementById("get_msg")
 .addEventListener("click", function(){
 client.MapSnapToRoad("28.000007,124.452746", function(result) {
 outputElement.innerHTML = result;
 });
 });
 })();
 </script>
 </body>
</html></pre>

  • 將靜態網頁分離,加上 CORS 參數: RPC 跑在 3000 port, 靜態網頁跑在 3001 port
server side:
var thrift = require('thrift'); 
var RpcService = require('./gen-nodejs/RpcService'); 
var ttypes = require('./gen-nodejs/RpcService_types'); 
var map_handler = {
 MapSnapToRoad: function(path, result) {
 console.log("MapSnapToRoad()");
 result(null, path);
 }
};

var map_svc_opt = {
 transport: thrift.TBufferedTransport,
 protocol: thrift.TJSONProtocol,
 processor: RpcService,
 handler: map_handler
 };
var cors = [];
cors["http://localhost:3001"] = true;
var server_opt = {
 cors: cors,
 services: {
 "/map": map_svc_opt
 }
};

var RPCserver = thrift.createWebServer(server_opt);
var port = 3000;
RPCserver.listen(port);
client side:
</pre>
<pre><!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <title>Hello Thrift</title>
 </head>
 <body>
 Name: <input type="text" id="name_in">
 <input type="button" id="get_msg" value="Get Message" >
<div id="output"></div>
 <script src="./public/gen-js/thrift.js"></script>
 <script src="./public/gen-js/RpcService.js"></script>
 <script>
(function() {
 var transport = new Thrift.TXHRTransport("http://localhost:3000/map");
 var protocol = new Thrift.TJSONProtocol(transport);
 var client = new RpcServiceClient(protocol);
 var nameElement = document.getElementById("name_in");
 var outputElement = document.getElementById("output");
 document.getElementById("get_msg")
 .addEventListener("click", function(){
 client.MapSnapToRoad("28.000007,124.452746", function(result) {
 outputElement.innerHTML = result;
 });
 });
 })();
 </script>
 </body>
</html></pre>