Nginx反向代理解決跨域問題

背景

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

圖片描述

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

爲何會跨域、複雜請求、nginx的使用不在本文範圍~vue

想到的解決方案

不跨域的方向

  • 方案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會發送一個登陸請求獲取數據

目錄結構圖以下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

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

全部/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服務

重啓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"
}

dayAndDay

參考資料

相關文章
相關標籤/搜索