早些時候咱們作了一個項目,用的是先後端分離,前端vue,後端提供功能接口,而後兩個部署在不一樣的域名下,後端接口開放了跨域,方便前端本地開發調試。前端項目域名爲www.a.com
,後端的接口域名爲 www.b.com
,上線後也沒問題,一切都美滋滋的。直到有一天,用戶反饋過來有一個頁面一些數據出現的太慢了。。html
而後咱們各類優化,前端緩存、數據庫索引等等,快了那麼一點,最後想能不能再快點,由於一開始用了開放跨域,且接口的請求方法爲post,因此是複雜請求,會先發送一個options請求探探路,每一個接口都會發這個,消耗的時間都有幾百毫秒,這樣時間就捉急了,那麼如何解決這個問題呢~前端
爲何會跨域、複雜請求、nginx的使用不在本文範圍~vue
目錄結構圖以下java
html ├── 50x.html ├── a │ └── index.html ├── b │ ├── apis │ │ └── login.json │ └── login.json └── index.html
b/login.json的內容爲`{node
"location": "我是b站點/login"
}`
b/apis/login.json的內容爲`{nginx
"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請求json
全部/apis/打頭的接口,所有去請求www.b.com
後端
nginx配置以下圖api
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服務
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"
}`
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" }