筆者在前幾天遇到一個跨域問題，請求一個地圖瓦片服務，但是地圖瓦片服務地址由另一個地圖服務商提供的，按照傳統的後端解決跨域的手段，主要有兩種：

（1）後端設定CORS（這個需要第三方CORS的jar包）
（2）對後端設定跨域訪問（即在get或者post等方法中設定 response.setHeader(“Access-Control-Allow-Origin”, “*”);）

具體可以參考：

那麼，什麼是跨域呢？

跨域，指的是瀏覽器不能執行其他網站的指令碼。它是由瀏覽器的同源策略造成的，是瀏覽器對JavaScript施加的安全限制。
所謂同源是指，域名，協議，埠相同。瀏覽器執行javascript指令碼時，會檢查這個指令碼屬於那個頁面，如果不是同源頁面，就不會被執行。
同源策略的目的，是防止黑客做一些做奸犯科的勾當。比如說，如果一個銀行的一個應用允許使用者上傳網頁，如果沒有同源策略，黑客可以編寫一個登陸表單提交到自己的伺服器上，得到一個看上去相當高大上的頁面。黑客把這個頁面通過郵件等發給使用者，使用者誤認為這是某銀行的主網頁進行登陸，就會洩露自己的使用者資料。而因為瀏覽器的同源策略，黑客無法收到表單資料。

因為筆者遇到的這種情況比較特殊一點，如果是自己寫的服務，那麼自然可以加上跨域請求的設定，但是如果是請求別的服務商的服務，那麼跨域要麼和服務商溝通，讓他們設定允許來自某域名的跨域訪問。要麼就需要像本文一樣，自己設定一個反向代理的伺服器，或者自己編寫一個代理服務。

代理服務其實就是把前端的跨域請求，通過代理進行一次轉發，代理執行真正的訪問另一域名下的服務（因為後端呼叫另一域名下的服務是不存在跨域問題的），將訪問後的結果返回給前端。

本文針對代理，提供兩種解決方案，一種是後端自己編碼，一種是使用Nginx代理。

（1）編碼
筆者採用vertx自己編寫代理服務（需要利用vertx的core包）
示例：

package util;
import io.vertx.core.AbstractVerticle;
import io.vertx.core.Vertx;
import io.vertx.core.http.HttpClient;
import io.vertx.core.http.HttpClientOptions;
import io.vertx.core.http.HttpClientRequest;

/**
 * 代理
 * @author KingWang
 *
 */
public class Proxy extends AbstractVerticle {

  @Override
  public void start() throws Exception {
    HttpClient client = vertx.createHttpClient
 
(new HttpClientOptions());
    vertx.createHttpServer().requestHandler(req -> {
      System.out.println("Proxying request: " + req.uri());
      HttpClientRequest c_req = client.request(req.method(), 25033, "10.73.199.229", req.uri(), c_res -> {
        System.out.println("Proxying response!");
//        System.out.println("Proxying response:" + c_res.statusCode());
        req.response().setChunked(true);
        req.response().setStatusCode(c_res.statusCode());
        req.response().headers().setAll(c_res.headers());
        c_res.handler(data -> {
          System.out.println("Proxying response body");
//          System.out.println("Proxying response body: " + data.toString("ISO-8859-1"));
          req.response().write(data);
        });
        c_res.endHandler((v) -> req.response().end());
      });
      c_req.setChunked(true);
      c_req.headers().setAll(req.headers());
      req.handler(data -> {
        System.out.println("Proxying request body ");
//        System.out.println("Proxying request body " + data.toString("ISO-8859-1"));
        c_req.write(data);
      });
      req.endHandler((v) -> c_req.end());
    }).listen(1001);
  }
}

（2）使用Nginx代理

Nginx是一款輕量級的Web 伺服器/反向代理伺服器及電子郵件（IMAP/POP3）代理伺服器，並在一個BSD-like 協議下發行。其特點是佔有記憶體少，併發能力強，事實上nginx的併發能力確實在同類型的網頁伺服器中表現較好，中國大陸使用nginx網站使用者有：百度、京東、新浪、網易、騰訊、淘寶等。

使用Nginx代理只需要幾行配置程式碼就可以了。

首先下載Nginx並安裝（不能安裝在中文目錄下）

然後在conf目錄下的nginx.conf配置相應的反向代理路徑

示例（本示例配置的是可以配置多個代理路徑，也就是多個server標籤）：

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       8081;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}