Nginx跨域的問題解決方案

跨域請求的問題是一個很常見的問題，有很多解決方案。這裡主要介紹的是通過配置Nginx實現跨域請求。

原理

瀏覽器同源策略是為了保護使用者的安全，防止一些簡單的黑客行為。跨域規則搜一下，很多答案。今天說的這種Nginx跨域方案是通過Nginx的反向代理，欺騙瀏覽器，讓瀏覽器以 為是同源呼叫。

方案

我們假設應用的域名是aaaa,要請求bbbb上提供的介面服務。bbbb上服務的url是bbbb/api。這時，我們在aaaa上發起aaaa/api的請求，用nginx攔截這個請求，將其傳送到bbbb/api。完成請求過程。

程式碼

Ajax請求(只關注URL)

get(url, options) {
    return Q.Promise((resolve, reject) => {
      ajax('aaaa/api', 'get', options)
        .then((data) => {
          resolve(data);
        }, (error) => {
          reject(error);
        });
    })
  }
複製程式碼

Nginx配置

location ~ ^/api {
  proxy_pass http://bbbb;
  proxy_redirect          off; 
  proxy_set_header        X-Real-IP       $remote_addr; 
  proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for; 
}
複製程式碼

優點

• 相容性極佳，能適用所有的瀏覽器
• 成本低，服務端無需額外配置，前端程式碼也無需修改
• 節約伺服器的效能
• 能攜帶Session，無需額外配置cookie等驗證資訊