利用nginx 反向代理解決跨域問題

  說到nginx，不得不說真的很強大，也帶來很多便利用於解決一些頭疼的難題。

  一般來說可以用來做：靜態頁面的服務器、靜態文件緩存服務器、網站反向代理、負載均衡服務器等等，而且實現這一切，基本只需要改改那萬能的配置文件即可。

之前的博文記錄了作為負載均衡。這里先記錄一下作為靜態頁面的服務器和反向代理跨域的使用。

結合之前 《angularjs+webapi2 跨域Basic 認證授權》的案例，對跨域的方式進行改造一下。

一.靜態頁面服務器

nginx.conf 的配置（其實默認的也是如此，所以作為靜態服務器只需要將靜態文件移動到nginx下的html文件夾里就可以了）

 

server {
      listen       8094; #監聽端口
      server_name  localhost; #

      #charset koi8-r;

      #access_log  logs/host.access.log  main;

     location / {
          root   html;#文件根目錄
          index  index.html index.htm;#默認起始頁
      }

        }

然后打開瀏覽器 輸入 localhost:8094 即可

就是這么簡單

二.反向代理服務器-》跨域

之前我們跨域是借助了瀏覽器對 Access-Control-Allow-Origin 的支持。但有些瀏覽器是不支持的，所以這並非是最佳方案

現在我們來利用nginx 通過反向代理 滿足瀏覽器的同源策略實現跨域

首先，我先注釋掉之前的跨域設置

然后訪問一下index1.html

提示了跨域問題

然后我們回到nginx.conf 配置一個反向代理路徑（新增紅色部分）

server {
        listen       8094;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

       location / {
            root   html;
            index  index.html index.htm;
        }
        location /apis {
    rewrite  ^.+apis/?(.*)$ /$1 break;
    include  uwsgi_params;
       proxy_pass   http://localhost:1894;
       }

}

配置說明：配置一個/apis  重寫到我們真正的api地址http://localhost:1894  形成一個代理的過程。

然后更改一下index1.html的api請求地址

這樣這個api的地址就跟當前頁面index1.html處於同源位置了。就是我們配置的nginx監聽地址 localhost:8094

然后我們再次在瀏覽器中訪問 index1.html   可能請求到的知識緩存頁面 請清除緩存或重啟nginx

沒有了跨域問題。 這里因為我之前登陸過 並記錄了 token 所以沒有提示登錄

小結：寫得不是很細，當作筆記，如傷過客，誠摯抱歉。