背景

早些時候我們做了一個項目，用的是前後端分離，前端vue,後端提供功能接口，然後兩個部署在不同的域名下,後端接口開放了跨域，方便前端本地開發調試。前端項目域名為www.a.com,後端的接口域名為 www.b.com，上線後也沒問題，一切都美滋滋的。直到有一天，用户反饋過來有一個頁面一些數據出現的太慢了。。

然後我們各種優化，前端緩存、數據庫索引等等，快了那麼一點，最後想能不能再快點，因為一開始用了開放跨域，且接口的請求方法為post,所以是複雜請求，會先發送一個options請求探探路，每個接口都會發這個，消耗的時間都有幾百毫秒，這樣時間就捉急了，那麼如何解決這個問題呢~

為什麼會跨域、複雜請求、nginx的使用不在本文範圍~

想到的解決方案

不跨域的方向

• 方案1：放到同一個項目中，同一個域名（pass，（前後端各自管理，不好合並了，需要考慮接口地址已經使用，不能改了的情況）
• 方案2：nginx反響代理api接口，對於前端項目來説看起來不跨域（採用）
• 方案3：jsonp和其他（限制比較多）

options請求的速度更快點的方向

• 方案：原來的跨域響應頭是應用中加的，能不能放在更前面一點的步驟，比如請求到nginx就返回(快了一丟丟。pass)

解決方案（方案2模擬）

場景

• 前端項目域名為www.a.com,文件夾為html/a,
• 接口項目為www.b.com，文件夾為html/b
• 現在有一個接口，www.b.com/login.json，大意為登錄接口，現在用json數據進行模擬
• www.a.com會發送一個登錄請求獲取數據

目錄結構圖如下

html
├── 50x.html
├── a
│   └── index.html
├── b
│   ├── apis
│   │   └── login.json
│   └── login.json
└── index.html

b/login.json的內容為`{

"location": "我是b站點/login"

}`
b/apis/login.json的內容為`{

"location":"我是b站點/apis/login"

}`
b/apis/login.json存在的意義是驗錯，沒有的的話訪問是404，但是需要知道訪問到哪啦

步驟

修改前端項目中的請求接口地址

修改前端項目www.a.com中的請求接口為www.a.com/apis/login，真正的接口地址為www.b.com/login，如果請求www.a.com/apis/login能獲取json數據，則不會進行跨域（前端項目和接口在同一域名下），也不會發options請求

修改前端項目www.a.com的nginx配置

所有/apis/打頭的接口，全部去請求www.b.com

nginx配置如下圖

server {
        listen       80;
        server_name  www.a.com;
        access_log  logs/test.access.log;
        # 匹配以/apis/開頭的請求
        location ^~ /apis/ {
            proxy_pass http://www.b.com;
        }
        location / {
            root html/a;
            index index.html index.htm;
        }
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

proxy_pass 常用在反向代理，比如nginx代理node服務，java服務

重啓nginx

效果

curl www.a.com/apis/login.json結果為

{
    "location":"我是b站點/apis/login"
}

結果是不對的（觀察下上文給出的文件夾下，還有個apis/login.json），心理的預期www.a.com/apis/login.json是要訪問到www.b.com/login.json，應該是b文件夾下的login.json，內容為
`{

"location": "我是b站點/login"

}`

修改a站點的nginx配置文件並重啓nginx

server {
        listen       80;
        server_name  www.a.com;
        access_log  logs/test.access.log;
        # 匹配以/apis/開頭的請求
        location ^~ /apis/ {
            proxy_pass http://www.b.com/;  #注意域名後有一個/
        }
        location / {
            root html/a;
            index index.html index.htm;
        }
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

沒錯就是proxy_pass後面的地址加一個/

• 加/的情況，訪問www.a.com/apis/login.json會得到www.b.com/login.json（符合預期的）,使用b文件夾作為/目錄來訪問
• 不加/的情況,訪問www.b.com/apis/login.json會得到www.b.com/apis/login.json（不符合預期）,使用b文件下的apis作為根目錄進行訪問

最終的效果為

{
    "location": "我是b站點/login"
}

參考資料

• 用nginx的反向代理機制解決前端跨域問題
• Nginx反向代理解決跨域問題